JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr rel="1"><td><a href="#" class="fold">fold</a> item 1</td></tr>
        <tr rel="2"><td><a href="#" class="fold">fold</a> item 1.1</td></tr>
        <tr rel="2"><td><a href="#" class="fold">fold</a> item 1.2</td></tr>
        <tr rel="1"><td>item 2</td></tr>
        <tr rel="1"><td><a href="#" class="fold">fold</a> item 3</td></tr>
        <tr rel="2"><td><a href="#" class="fold">fold</a> item 3.1</td></tr>
        <tr rel="3"><td>item 3.1.1</td></tr>
        <tr rel="3"><td>item 3.1.2</td></tr>
</tbody>
</table>

JavaScript

$(function() {
    $('a.fold').click(function() {
        var row = $(this).closest('tr');
        var level = row.attr('rel');
        row.nextAll('tr').each(function() {
            if ($(this).attr('rel') > level) {
                $(this).toggle();
            } else {
                // abort loop
                return false;
            }
        });
        
        return false;
    });
});