Keep only one child row opened at a time

ced2718

Good evening to all,

I'm starting a website which features a datable and I've a question for you. I'm an absolute beginner, I've never built any website before and my knowledges in Ajax are limited so far, so it makes it difficult for now to manage what I want. I hope the answer I'm looking for is not completely stupid but it probably is ;)

I want to build a table with child rows (I've already managed to do this part, thanks to the examples on this website). What I would like now is a kind of trigger that only allows one child row open at the same time.
What I mean is that if one child row is open and if I click on another one, I want the first one to close and the second one to open.

I've found this snippet on the internet (I don't really understand how it works, but it seems that it allows only one child to be open, but you have to close manually the one open if you want to open another one, which is not really what I'm looking for).

 table.rows().eq(0).each( function ( idx ) {
       var row = table.row( idx );
 
       if ( row.child.isShown() ) {
            row.child.close();
       }
 } ); 

The code I've got until now is the following :

$('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.remove();
            tr.removeClass('shown');
        }
        else {

            table.rows().eq(0).each( function ( idx ) {
            var row = table.row( idx );
 
            if ( row.child.isShown() ) {
                 row.child.close();
            }
            } );

            row.child( format(row.data()) ).show();
            tr.addClass('shown');
       }
} );

Thanks for your help!

UPEngineer

This is what I used and seems to work correctly.

$('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

    if ( row.child.isShown() ) {
         row.child.hide();
         tr.removeClass('shown');      
        }
    else 
        {
         if ( table.row( '.shown' ).length ) {
                  $('.details-control', table.row( '.shown' ).node()).click();
          }
          row.child( format(row.data()) ).show();
          tr.addClass('shown');
     }
})

Scott

ced2718

It's working perfectly fine! Thank you so much, I had been looking for a while.