jQuery Expanding and Collapsing Table Rows

The expanding and collapsing behavior added earlier also conflicts with our filters. If a section is collapsed and a new filter is chosen, then the matching items are displayed, even if in the collapsed section. Conversely, if the table is filtered and a section is expanded, then all items in the expanded section are displayed regardless of whether they match the filter.

Since we have added the filtered class to all rows when they are removed by a filter button, we can check for this class inside our collapser's click handler:

var toggleSrc = $(this).attr('src'); 
 
if ( toggleSrc == toggleMinus ) { 
 
$(this).attr('src', togglePlus) 
 
.parents('tr').siblings().addClass('collapsed').fadeOut('fast'); 
 
} else{ 
 
$(this).attr('src', toggleMinus) 
 
.parents('tr').siblings().removeClass('collapsed') 
 
.not('.filtered').fadeIn('fast'); 
 
};

While we are collapsing or expanding rows, we add or remove another new class on the rows. We need this class to solve the other half of the problem. The filtering code can use the class to ensure that a row should be shown when the filter changes:

$table.find('tbody tr').each(function() { 
 
if ($('td', this).filter(':nth-child(' + (column + 1) + ')').text() 
 
== e.data['keyword']) { 
 
$(this).removeClass('filtered').not('.collapsed').show(); 
 
} 
 
else if ($('th',this).length == 0) { 
 
$(this).addClass('filtered').hide(); 
 
} 
 
});

Now our features play nicely, each able to hide and show the rows independently.