I have a table which displays data in different levels (Parent, Child, Grandson) when I click on the parent it displays new rows related to the child level and if I click on child it displays a third level as the grandson with more rows.
What I want to do is to add a button on each record with the "+" symbol so when I click it I'll see the second level and switch that button from the parent to another with the "-" symbol, to simulate the expand and collapse functionality, I want to do this for also for the child level.
Now the columns expand or collapse if I click on a row but I want to do this if I click on the buttons that I want to add.
Here's my code:
$('.drillDown tr td:last-child, .drillDown tr th:last-child').hide();
$('.drillDown tr td:first-child, .drillDown tr th:first-child').dblclick(function(){
$('.drillDown tr td:last-child, .drillDown tr th:last-child').show();
})
$('table.drillDown').each(function() {
var $table = $(this);
$table.find('.parent').dblclick(function() {
console.log( "*****Click on Parent" );
$(this).nextUntil('.parent', ".child").toggle("fast");
$(this).nextUntil('.parent', ".grandson").hide("fast");
});
$table.find('.child').dblclick(function() {
console.log( "*****Click on child" );
$(this).nextUntil('.child', ".grandson").toggle("fast");
});
var $childRows = $table.find('tbody tr').not('.parent').hide();
$table.find('button.hide').dblclick(function() {
$childRows.hide();
});
$table.find('button.show').dblclick(function() {
console.log("*****Click on Child");
$childRows.filter('.child').show();
});
$table.find('tr.child').dblclick(function(){
$(this).nextUntil('.child').show()
});
});
And also my fiddle with the complete example
https://jsfiddle.net/ny6qcxtd/2/
Thanks!
changed with following fiddle