Child row doesn't close in the example

Ficos

Link to test case:

// Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.dt-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.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

As the example says: an open row should be closed when another row is opened, but that does not work.
How can I fix this?

kthorngren

The example doesn't say that the other rows will be closed. This is from the example:

to first check if a row is already displayed, and if so hide it (row().child.hide()), otherwise show it (row().child.show()).

See this example form this thread to see how to close all open rows. It uses a button click but you can place the code in the above click hander.

Kevin