JSFiddle - React, Tailwind, and code Playground

by Chris Hill

HTML

<table>
    <tr>
        <td></td>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 6</td>
        <td>Column 7</td>
    </tr>
    <tr>
        <td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>
        <td>Company</td>
        <td>47</td>
        <td>123</td>
        <td>22/10</td>
        <td>***</td>
        <td></td>
        <td></td>
            <td></td>
    </tr>
    <tr class="cat1" style="display:none">
        <td><a href="#" class="pitcher" data-prod-cat="1">pitch </a></td>
        <td>List</td>
        <td>120</td>
        <td>105</td>
        <td>22/10</td>
         <td>***</td>
        <td>23/6/2015</td>
        <td>14.95%</td>
        <td>30%</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td><a href="#">-</a></td>
        <td>
            
            <p>HELLO</p>
        </td>
    </tr>
    <tr class="cat1" style="display:none">
        <td><a href="#" class="pitcher" data-prod-cat="1">pitch </a></td>
        <td>List</td>
        <td>120</td>
        <td>105</td>
        <td>22/10</td>
         <td>***</td>
        <td>23/6/2015</td>
        <td>14.95%</td>
        <td>30%</td>
    </tr>
    <tr class="cat1" style="display:none">
         <td><a href="#">-</a></td>
        <td>
            <p>HELLO</p>
        </td>
    </tr>

     <tr>
        <td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>
        <td>Company</td>
        <td>48</td>
        <td>156</td>
        <td>22/10</td>
        <td>***</td>
        <td></td>
        <td></td>
            <td></td>
    </tr>
    <tr class="cat1" style="display:none">
        <td><a href="#" class="pitcher" data-prod-cat="1">pitch </a></td>
        <td>List</td>
        <td>156</td>
        <td>256</td>
        <td>22/10</td>
         <td>***</td>
        <td>23/6/2015</td>
        <td>16.95%</td>
        <td>30%</td>
    </tr>
    <tr...

JavaScript

$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        $(this).toggleClass("expand");
        var className = 'cat'+$(this).attr('data-prod-cat');
        var $current= $(this).closest('tr').next();
        while($current.hasClass(className)){
            if($(this).hasClass("expand")){
               $current.show();
               $current = $current.next().next();
            }
            else{
               $current.hide();
               $current = $current.next();
            }
           
        }

    });
        $(".pitcher").click(function(e){
        e.preventDefault();
        var className = 'cat'+$(this).attr('data-prod-cat');
        $(this).closest('tr').next().toggle();
        });
});