JSFiddle - React, Tailwind, and code Playground

by Mark Pitman

HTML

<body>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <button id="toggle_button" type="button" class="btn btn-default grouping">Toggle All</button>
    <table>
        <tr>
            <td>stuff</td>
            <td>stuff</td>
            <td>stuff</td>
        </tr>
        <tr class="grouping">
            <td>
                <button id="group_button_99999" type="button" class="btn btn-default  grouping" data-rows="2">Toggle</button>
            </td>
            <td>stuff1</td>
            <td>stuff</td>
        </tr>
        <tr>
            <td>stuff2</td>
            <td>stuff</td>
            <td>stuff</td>
        </tr>
        <tr>
            <td>stuff3</td>
            <td>stuff</td>
            <td>stuff</td>
        </tr>
        <tr>
            <td>stuff4</td>
            <td>stuff</td>
            <td>stuff</td>
        </tr>
    </table>
</body>

</html>

JavaScript

(function () {
    $(document).ready(function () {
        console.log("ready!");

        var button1 = $('#group_button_99999');
        button1.click(button1, hideRows);

        var button2 = $('#toggle_button');
        button2.click(hideAll);


    });

    function hideRows(button) {
        var element = button.currentTarget;
    $(element).parents('tr').nextAll().slice(0, $(element).data('rows')).toggle();
    }

    function hideAll() {
        $('tr').not('.grouping').toggle();
    }

})();