I need some help in my JQuery code I can not seem to understand where I am going wrong. It's a simple 'Parent' and 'Child' style collapsible table. So to start with all 'children' are hidden and if you click on a Parent it shows all it's children. The problem with my code is when I click on a Parent all of it's children are shown in all the rest of the Parents too.
Thanks
$(document).ready(function() {
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$('location.href').click(function() {
$.ajax({
type : 'GET',
url : 'Test',
data : '${cat.categoryId}',
success : function(response) {
$('ul').html(response);
$("#report tr.odd").next("tr").toggle();
}
});
});
});
JSP
<c:if test="${!empty categoryList}">
<table id="report">
<tr>
<th>Category Name <span><button id="create-cat">Create new category</button></span></th>