JSFiddle - React, Tailwind, and code Playground

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="3">
            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).parent().next("tr").toggle();
            $(this).find(".arrow").toggleClass("up");
        });
    });