JSFiddle - React, Tailwind, and code Playground

HTML

<script src=" &lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt; "></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<table id="report" border="1" style="width:100%" >
    <tr>
        <th> First </th>
        <th> Second </th>
        <th> Third </th>
    </tr>

    <tr>
         <td><i class="fa fa-plus test1"></i>
           <i class="fa fa-minus test1" ></i></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>   
</table>

CSS

#report tbody tr:not(:first-child):nth-child(odd){
    display:none;
}

JavaScript

$(document).ready(function(){
        $("#report tbody tr:odd td:first-child").click(function(){
            $this=$(this);
            $this.parent().next("tr").toggle();
          
            $(".test1").toggle();
            $this.find(".arrow").toggleClass("up");
          
        });
    });