JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table">
    <tr class="main-parent" id="">
        <td><div>MAIN PARENT</div></td>
        <td><div>MAIN PARENT</div></td>
        <td><div>MAIN PARENT</div></td>
    </tr>
    <tr class="parent sub" id="row1">
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
    </tr>
   
    <tr class="child-row1-1 sub">
        <td><div>CHILD</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row1-2 sub">
        <td><div>CHILD</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
    <tr class="parent sub" id="row2">
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
        <td><div>PARENT</div></td>
    </tr>
   
    <tr class="child-row2-1 sub">
        <td><div>CHILD</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row2-2 sub">
        <td><div>CHILD</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
</table>

JavaScript

// main heading
$('tr.main-parent')
    .css("cursor", "pointer")
    .click(function () {
        
        var $children = $(this).nextUntil($('tr').not('.sub'));
        
        if ($children.find(':visible').length) {
            $children.find('td > div, td').slideUp();
        }       
        else {
            $children.filter('.parent').find('td > div, td').slideDown();
        }
});
$('tr[class^=child-]').find('td > div, td').hide();

// parent heading
$('tr.parent')
    .css("cursor", "pointer")
    .click(function () {
        var $children = $(this).nextUntil($('tr').not('[class^=child-]'));
        $children.find('td > div, td').slideToggle();
});
$('tr.sub').find('td > div, td').hide();