JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead id="tableHead" style="display:none;"></thead>
    <tbody id="tBody1" style="word-wrap: break-word" onclick="customCollapse(this);">
        <tr>
            <td>Some data</td>
        </tr>
        <tr>
            <td>Some data</td>
        </tr>
        <tr>
            <td>Some data</td>
        </tr>
        <tr>
            <td>Some data</td>
        </tr>
        <tr>
            <td>Some data</td>
        </tr>
        <tr>
            <td>Some data</td>
        </tr>
        <tr>
            <td>Some data</td>
        </tr>
    </tbody>
    <tbody id="tbody2" style="word-wrap: break-word;" class="slider">
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
        <tr>
            <td>Some data again</td>
        </tr>
    </tbody>
</table>

CSS

.slider {
    overflow-y: hidden;
    /*max-height: 500px;*/
    /* approximate max height */
    display: table-row-group;
    transition-property: all;
    transition-duration: 5s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.slider.closed {
    /*max-height: 0;*/
    display: none;
}

JavaScript

function customCollapse(that) {
    $(that).next('tbody').toggleClass('closed');
}