aCollaptable

aCollapTable is a jQuery plugin that will make your html tables collapsables.

Learn more
Food
Meat
Beef
Pork
Turkey
Fruits
Apple
Orange
Pear

<table class="table table-hover" id="demo-1">
    <thead>
        <tr>
            <th>Food</th>
        </tr>
    </thead>
    <tbody>
        <tr data-id="1" data-parent="">
            
            <td>Meat</td>
        </tr>
        <tr data-id="2" data-parent="1">
            
            <td>Beef</td>
        </tr>
        <tr data-id="3" data-parent="1">
            
            <td>Pork</td>
        </tr>
        <tr data-id="3" data-parent="1">
            
            <td>Turkey</td>
        </tr>
        <tr data-id="4" data-parent="">
            
            <td>Fruits</td>
        </tr>
        <tr data-id="5" data-parent="4">
            
            <td>Apple</td>
        </tr>
        <tr data-id="6" data-parent="4">
            
            <td>Orange</td>
        </tr>
        <tr data-id="7" data-parent="4">
            
            <td>Pear</td>
        </tr>
    </tbody>
</table>
                            

$('#demo-1').aCollapTable({
    startCollapsed: true,
    addColumn: false,
    plusButton: '<i class="glyphicon glyphicon-plus"></i> ', 
    minusButton: '<i class="glyphicon glyphicon-minus"></i> ' 
});
                            
Consoles
Sony
PS 4
PS Vita
Nintendo
Wii U
3DS
Microsoft
XBOX One
Sony VideoGames
PS 4
Infamous Second Son
Fallout 4
Call of Duty : Black Ops III
Need for Speed
PS Vita
Minecraft: PlayStation Vita Edition
LEGO Batman 3: Beyond Gotham
LittleBigPlanet PlayStation Vita Marvel Super Hero Edition

<div class="col-md-6">
    <table class="table table-hover table-demo-2">
        <thead>
            <tr>
                <th>Consoles</th>
            </tr>
        </thead>
        <tbody>
            <tr data-id="1" data-parent="">
                <td>Sony</td>
            </tr>
            <tr data-id="2" data-parent="1">
                <td>PS 4</td>
            </tr>
            <tr data-id="3" data-parent="1">
                <td>PS Vita</td>
            </tr>
            <tr data-id="4" data-parent="">
                <td>Nintendo</td>
            </tr>
            <tr data-id="5" data-parent="4">
                <td>Wii U</td>
            </tr>
            <tr data-id="6" data-parent="4">
                <td>3DS</td>
            </tr>
            <tr data-id="7" data-parent="">
                <td>Microsoft</td>
            </tr>
            <tr data-id="8" data-parent="7">
                <td>XBOX One</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="col-md-6">
    <table class="table table-hover table-demo-2">
        <thead>
            <tr>
                <th>Sony VideoGames</th>
            </tr>
        </thead>
        <tbody>
            <tr data-id="1" data-parent="">
                <td>PS 4</td>
            </tr>
            <tr data-id="2" data-parent="1">
                <td>Infamous Second Son</td>
            </tr>
            <tr data-id="3" data-parent="1">
                <td>Fallout 4</td>
            </tr>
            <tr data-id="4" data-parent="1">
                <td>Call of Duty : Black Ops III</td>
            </tr>
            <tr data-id="5" data-parent="1">
                <td>Need for Speed</td>
            </tr>
            <tr data-id="6" data-parent="">
                <td>PS Vita</td>
            </tr>
            <tr data-id="7" data-parent="6">
                <td>Minecraft: PlayStation Vita Edition</td>
            </tr>
            <tr data-id="8" data-parent="6">
                <td>LEGO Batman 3: Beyond Gotham</td>
            </tr>
            <tr data-id="9" data-parent="6">
                <td>LittleBigPlanet PlayStation Vita Marvel Super Hero Edition</td>
            </tr>
        </tbody>
    </table>
</div>
                            
$('.table-demo-2').aCollapTable({
    startCollapsed: true,
    addColumn: true,
    plusButton: '<i class="glyphicon glyphicon-plus"></i> ', 
    minusButton: '<i class="glyphicon glyphicon-minus"></i> ' 
});