In the midst of creating a system that allows users to construct their own navigation structure, I have encountered a stumbling block. The idea is that when a user lands on the site, they are presented with a list of available topics from which they can choose. Selecting a topic triggers the creation of an accordion containing all the relevant content. Should the user click on the same topic again, the accordion should disappear. Unfortunately, the current code setup is failing to achieve this functionality. Can anyone offer guidance?
Here is the Javascript code snippet:
$("a.navlink").click(function(ev) {
var url = $(this).attr("href")
var id = $(this).attr("id")
ev.preventDefault();
if(!$(this).hasClass('saved')) {
//$("a.navlink").addClass('active')
$.ajax ({
url: url,
type: "POST",
data: "method=add&id="+id,
success: function (html) {
$('#accordion').accordion('destroy');
$("#accordion").append(html);
$('#accordion').accordion({
//active: 0,
header:'h2.'+id,
collapsible:true
});
$("a.navlink").addClass('saved');
}
});
} else if($("a.navlink").hasClass('saved')) {
$.ajax ({
url: url,
type: "POST",
data: "method=delete",
success: function (html) {
$("a.navlink").removeClass('saved');
//$("."+id).remove();
}
});
}
});
The following HTML/PHP script generates the accordion:
<?php
var_dump($_POST);
if(isset($content)) {
foreach($category_name as $k => $v) {
echo "<h2 class=".$this->input->post('id')."><a href='#'>$v[category_name]</a></h2>";
echo "<div class='$v[category_name]'>";
}
$replace = array(".", "png", "gif", "jpg");
$count = 0;
foreach($content as $k=>$v) {
$count ++;
$image_name = str_replace($replace, "", $v['image_name']);
echo "<a class='contentlink' href='index.php/home/get_content_abstract/$v[content_id]'>";
echo "<img src='/media/uploads/".strtolower($v['category_name'])."/".$image_name."_thumb.png' alt='This is the picture' />";
echo "</a>";
}
echo "</div>";
//die(var_dump($content));
}
if(isset($favourites_category)) {
//die(var_dump($favourites));
echo "<h2 class=".$this->input->post('id')."><a href='#'>$favourites_category</a></h2>";
$count = 0;
$replace = array(".", "png", "gif", "jpg");
foreach ($favourites as $row) {
$count ++;
$image_name = str_replace($replace, "", $row['image_name']);
echo "<div class='$favourites_category'>";
echo "<a class='contentlink' href='index.php/home/get_content_abstract/$row[content_id]'>";
echo "<img src='/media/uploads/".strtolower($row['category_name'])."/".$image_name."_thumb.png' alt='This is the picture' />";
echo "<a/>";
echo "</div>";
}
}
?>
To clarify, I am seeking a solution to uniquely identify each created accordion and ensure that clicking its associated link removes it from the screen.