JSFiddle - React, Tailwind, and code Playground

by makypl

HTML

<table>
    <tr class="toggle">
        <td>Txt 1</td>
    </tr>
    <tr class="filter" style="display:none">
        <td>
            <ul>
                <li>aa</li>
                <li>bb</li>
                <li>cc</li>
            </ul>
        </td>
    </tr>
    <tr class="toggle">
        <td>Txt 2</td>
    </tr>
    <tr class="filter" style="display:none">
        <td>
            <ul>
                <li>aa</li>
                <li>bb</li>
                <li>cc</li>
            </ul>
        </td>
    </tr>
</table>

CSS

tr.toggle td {
    color: blue;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    width: 200px;
}
tr.noBorder td {
    border-bottom: none;
}

JavaScript

$(".toggle").on("click", function () {
    var t = $(this).next(".filter");
    var s = $(this);
    t.toggle("fast", function () {
        s.toggleClass("noBorder");
    });
});