JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr class="lev1">
            <td>
                <b>Show</b>
            </td>
        </tr>
        <tr class="lev2">
            <td>
                hidden first level
            </td>
        </tr>
         <tr class="lev3">
            <td>
                hidden second level 
            </td>
        </tr>
        <tr class="lev2">
            <td>
                hidden first level
            </td>
        </tr>
        <tr class="lev3">
            <td>
                 hidden second level
            </td>
        </tr>
        <tr class="lev1">
            <td>
               <b>Show2</b>
            </td>
        </tr>
         <tr class="lev2">
            <td>
                hidden first level
            </td>
        </tr>
    </tbody>
</table>

CSS

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

JavaScript

//A hierarchical-tree html table implementation. Supports 3 degrees of folding. Just click on the rows to see the magic. Credit: http://stackoverflow.com/a/4893567.

$("tr.lev1").click(function() {
    var lev3show = $('tr.lev3').is(':visible');
    if (lev3show!=true){        $(this).nextUntil(".lev1",'.lev2').toggle()};
    if (lev3show==true){
        $(this).nextUntil(".lev1").hide()};
});
$("tr.lev2").click(function() {
  $(this).nextUntil('.lev2','.lev3').toggle();
});