JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<table border="0">
    <tr class="header">
        <td colspan="2">Header</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr class="header">
        <td colspan="2">Header</td>
    </tr>
    <tr>
        <td>date</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
</table>

JavaScript

$('tr').hide().filter(function () {
    return $(this).find('td[colspan]').length;
}).addClass('header').css('display', 'table-row').click(function () {
    $(this).nextUntil('tr.header').css('display', function (i, v) {
        return this.style.display === 'table-row' ? 'none' : 'table-row';
    });
});