JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<table id="report" border="1" style="width:100%">
    <tr>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
    </tr>
    <tr>
        <td>1st title</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td colspan="10">dummy text 1
            <br>dummy text 1
            <br>dummy text 1
            <br>
        </td>
    </tr>
    <tr>
        <td>2nd title</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td colspan="10">dummy text 2
            <br>dummy text 2
            <br>dummy text 2
            <br>
        </td>
    </tr>
</table>

JavaScript

$(document).ready(function () {
     $("#report tbody tr:odd").addClass("odd");
     $("#report tbody tr:not(.odd)").hide();
     $("#report tbody tr:first-child").show();

     $("#report tbody tr.odd td:first-child").click(function () {
         $(this).next("tr").toggle();
         $(this).find(".arrow").toggleClass("up");
     });
     //$("#report").jExpand();
 });