DrillDown

Html table

HTML

<script src="&lt;!-- Latest compiled and minified CSS --&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot; integrity=&quot;sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7&quot; crossorigin=&quot;anonymous&quot;&gt;"></script>
<script src="https://code.jquery.com/jquery-2.2.2.min.js&quot;   integrity=&quot;sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=&quot;   crossorigin=&quot;anonymous"></script>
    <!-- Page Content -->
    <div class="container">

        <div class="row">
            <div class="col-lg-12 text-center">

                <table class="table table condensed drillDown">

                    <thead>

                        <!--SUB HEADER 2-->
                        <tr style="background-color: #E3E3E3">
                        <th style="text-align: center">Expand/Collapse</th>
                            <!--SALES-->
                            <th style="text-align: center">Categories</th>
                            <th style="text-align: center">LW $</th>
                            <th style="text-align: center">LW</th>
                            <th style="text-align: center">L4 W</th>
                            <th style="text-align: center">L13 W</th>
                            <th style="text-align: center">L52 W</th>
                            

                        </tr>

                      
                    </thead>

                    <tbody>
                        <tr class="parent" style="cursor:pointer">
                            <td class="expand"></td>
                            <td>33 D33 GIRLS DRESS</td>

                            <td>$1,564.90</td>
                            <td>1.5%</td>
                            <td>1.7%</td>
                            <td>6.4%</td>
                            <td>1.1%</td>
                            

                        </tr> 

                       ...

CSS

body {
        padding-top: 210px;

    }

JavaScript

$('table.drillDown').each(function() {

            var $table = $(this);
            $table.find('.parent').each(function(){
                if($(this).nextUntil('.parent', ".child").length > 0){
                    $(this).children('td:first').html('+');
                }    
            });
            $table.find('.child').each(function(){
                if($(this).nextUntil('.child', ".grandson").length > 0){
                    $(this).children('td:first').html('+');
                }
            });

            var $childRows = $table.find('tbody tr').not('.parent').hide();
            $table.find('button.hide').click(function() {
                $childRows.hide();

            });

        });
        $('.expand:not(:empty)').click(function(){
            if($(this).parent().hasClass('parent') == true)
            {
                if ($(this).text() == "+")
                   $(this).text("-")
                else
                   $(this).text("+");
                $(this).parent().nextUntil('.parent', ".child").toggle("fast"); 
                $(this).parent().nextUntil('.parent', ".grandson").hide("fast");
                 $(this).parent().nextUntil('.parent', ".child").each(function(){
                    if($(this).children('td:first').text() == '-')
                        $(this).children('td:first').text('+');
                });
            }
            else if($(this).parent().hasClass('child') == true)
            {
                if ($(this).text() == "+")
                   $(this).text("-")
                else
                   $(this).text("+");
                $(this).parent().nextUntil('.child', ".grandson").toggle("fast"); 
            }
        });