JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr class="main">
            <td >
                <span class="expand">
                    expand</span>
            </td>
            <td>
                Show
            </td>
            <td>
                Show
            </td>
        </tr>
        <tr class="hidden">
            <td colspan="3">
                hidden 1
            </td>
        </tr>
        <tr class="hidden">
            <td colspan="3">
                hidden 2
            </td>
        </tr>
        <tr class="main">
            <td>
                <span class="expand">
                    expand</span>
            </td>
            <td>
                Show
            </td>
            <td>
                Show
            </td>
        </tr>
        <tr class="hidden">
            <td colspan="3">
                hidden 1
            </td>
        </tr>
        <tr class="hidden">
            <td colspan="3">
                hidden 2
            </td>
        </tr>
        <tr class="hidden">
            <td colspan="3">
                hidden 3
            </td>
        </tr>
        <tr class="hidden">
            <td colspan="3">
                hidden 4
            </td>
        </tr>
        <tr class="hidden">
            <td colspan="3">
                hidden 5
            </td>
        </tr>
    </tbody>
</table>

CSS

.hidden{
    display:none;
}
table
{
    width:100%;
}
table td
{
    border:solid 1px black;
}
.expand
{
    font-weight:bold;
}

JavaScript

$("td span.expand").click(function() {
    $(this).parents("tr.main").nextUntil("tr.main").toggle();
});