JSFiddle - React, Tailwind, and code Playground

by akshatha suchethan

HTML

<table border="0">
    <tr class="header" id="header1">
        <td colspan="2">Header</td>
    </tr>
    <tr data-for="header1" style="display:none">
        <td>data</td>
        <td>data</td>
    </tr>
    <tr data-for="header1" style="display:none">
        <td>data</td>
        <td>data</td>
    </tr>
    <tr class="header" id="header2">
        <td colspan="2">Header</td>
    </tr>
    <tr data-for="header2" style="display:none">
        <td>date</td>
        <td>data</td>
    </tr>
    <tr data-for="header2" style="display:none">
        <td>data</td>
        <td>data</td>
    </tr>
    <tr data-for="header2" style="display:none">
        <td>data</td>
        <td>data</td>
    </tr>
</table>

JavaScript

$(".header").click(function () {
    $("[data-for="+this.id+"]").slideToggle(2000);
});