jQuery toggle() on array of mysql fetched arrray - php

Question

I have a fetched with php as an array and it is categorized. See code:
<table><?php
$cat_set = get_all_cats();
while($category = mysql_fetch_array($cat_set)){
if($category["category"] != "no-cat"){
echo "<tr colspam=\"2\"><td></td><td id=\"cats\">".$category["category"]."<td><img id=\"blink\" src=\"drop.png\"></td></td></tr>";
$course_set = get_courses_for_cats($category["cat_id"]);
while ($course = mysql_fetch_array($course_set)) {
echo"<tr class=\"cont\"><td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\"></td><td class=\"code\">" . $course["course_code"] . "</td></tr></input>";
}
}
else {
$course_set = get_courses_for_cats($category["cat_id"]);
while ($course = mysql_fetch_array($course_set)) {
echo"<tr class=\"cont\"><td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\"></td><td class=\"code\">" . $course["course_code"] . "</td></tr></input>";
}
}
}
?>
</table>
So every course has a categoty.
Now what I want to do is to use jquery to hide the course unless its category is clicked an this is what i have achieved
<script>
$(document).ready(function(){
$(".cont").hide();
$("#cats").click(function(){
$(".cont").toggle();
});
})
</script>
but it when i click the category it hides all the courses even those that does not belong to itself. I know if the categories had different ids it would have been better but because it is an array, one id serves them all. Please any idea on how i can fix this. Thanks

Answer 1

Use event Delegation you add the dom elments dynamically using php
$(document).ready(function(){
$(".cont").hide();
$(document).on("click" , "#cats" , function(){
$(".cont").toggle();
});
})

Answer 2

Try this one.
<table>
<?php
$cat_set = get_all_cats();
while($category = mysql_fetch_array($cat_set)){
if($category["category"] != "no-cat"){
echo "<tr colspam=\"2\"><td></td><td id=\"cats\" catid='".$category["cat_id"]."'>".$category["category"]."</td><td><img id=\"blink\" src=\"drop.png\"></td></tr>";
$course_set = get_courses_for_cats($category["cat_id"]);
while ($course = mysql_fetch_array($course_set)) {
echo"<tr class='cont cont".$category["cat_id"]."><td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\"></td><td class=\"code\">" . $course["course_code"] . "</td></tr></input>";
}
}
else {
$course_set = get_courses_for_cats($category["cat_id"]);
while ($course = mysql_fetch_array($course_set)) {
echo"<tr class='cont cont".$category["cat_id"]."><td><input value = ". $course["course_code"] ." name=\"boxes[]\" type=\"checkbox\"></td><td class=\"code\">" . $course["course_code"] . "</td></tr></input>";
}
}
}
?>
</table>
JavaScript
<script>
$(document).ready(function(){
$(".cont").hide();
$("#cats").click(function(){
$(".cont"+$(this).attr('catid')).toggle();
});
})
</script>
Look for syntax errors if any.

Answer 3

"Well the category row i gave an attribute called data-show="{categoryName}" and then each row for that category i gave an attribute data-cat="{categoryName}"
What then the JQuery does when you click on the category it finds the value of its data-show attribute it then toggles all of the elements with a data-cat attribute that is equal to the data-show attribute"
Click for the jsfiddle.net sollution
Helped by cdcoding
<script>
$(document).ready(function(){
$(".cont").hide();
$("[data-show]").click(function(){
var selector = $(this).attr("data-show");
$("[data-cat='"+selector+"']").toggle();
});
});
</script>