Multi-Level headers - collapse on sub header and main header

Method_dev

So I have:

    var collapsedGroups = {};

    var table = $('#myTable').DataTable({
        initComplete: function () {
    },
        rowGroup: {

            // Uses the 'row group' plugin
            dataSrc: [1, 2],
            startRender: function (rows, group) {
                

                var collapsed = !!collapsedGroups[group];

                rows.nodes().each(function (r) {
                    r.style.display = collapsed ? 'none' : '';
                });

                // Add category name to the <tr>. NOTE: Hardcoded colspan
                console.log(group + " || " + rows.nodes());
                return $('<tr/>')
                    .append('<td class="bobsYourUncle" colspan="19">' + group + '</td>')
                    .attr('data-name', group)
                    .toggleClass('collapsed', collapsed);
            }
        },
        
        
    });

    /* Collapse/Expand Hold Rows Start */
    $('#myTable tbody').on('click', 'tr.dtrg-start', function () {
        var name = $(this).data('name');
        console.log(name + " || " + collapsedGroups[name] );
        collapsedGroups[name] = !collapsedGroups[name];
        table.draw(false);
    });
    /* Collapse/Expand Hold Rows End */

The above lets me collapse on the children of the main section but I want to be able to collapse the children as well as the parent header. is there a good way?

colin

This thread should help, it's asking the same thing.

Cheers,

Colin