JSFiddle - React, Tailwind, and code Playground

by vcolmenar

HTML

<table border = "1">
    <tr>
        <th>Main</th>
        <th>Data</th>
    </tr>
    <tr class="main">
        <td><a href="#" class="main">12345</a></td>
      </tr>
        <tr class = "data">
            <td></td>
            <td>11111</td>
        </tr>
  
    <tr class="main">
        <td><a href="#" class="main">12345</a></td>
    </tr>
            <tr class = "data">
            <td></td>
            <td>11111</td>
        </tr>
    <tr class="main">
        <td><a href="#" class="main">12345</a></td>  
    </tr>        
            <tr class = "data">
            <td></td>
            <td>11111</td>
    </tr>
    <tr class = "data">
        <td></td>
                <td>22222</td>
    </tr>
    <tr class = "data">
        <td></td>
                <td>33333</td>
    </tr>
    <tr class = "data">
        <td></td>
                <td>44444</td>
    </tr>
</table>

JavaScript

$(document).ready(function() {
    //Hide table rows with class 'min', but appear when clicked.
    $(".data").hide();
    $(".main").click(function() {
        $(this).parent().parent().next(".data").toggle("fast");
    });

});