<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <table id="mytable"> <tr data-depth="0" class="collapse level0"> <td><span class="toggle collapse"></span>Item 1</td> <td>123</td> </tr> <tr data-depth="1" class="collapse level1"> <td><span class="toggle"></span>Item 2</td> <td>123</td> </tr> <tr data-depth="2" class="collapse level2"> <td>Item 3</td> <td>123</td> </tr> <tr data-depth="1" class="collapse level1"> <td>Item 4</td> <td>123</td> </tr> <tr data-depth="0" class="collapse collapsable level0"> <td><span class="toggle collapse"></span>Item 5</td> <td>123</td> </tr> <tr data-depth="1" class="collapse collapsable level1"> <td>Item 6</td> <td>123</td> </tr> </table>

table td { border: 1px solid #eee; } .level1 td:first-child { padding-left: 15px; } .level2 td:first-child { padding-left: 30px; } .collapse .toggle { background: url("http://mleibman.github.com/SlickGrid/images/collapse.gif"); } .expand .toggle { background: url("http://mleibman.github.com/SlickGrid/images/expand.gif"); } .toggle { height: 9px; width: 9px; display: inline-block; }

$(function() { $('#mytable').on('click', '.toggle', function () { var findChildren = function (tr) { var depth = tr.data('depth'); return tr.nextUntil($('tr').filter(function () { return $(this).data('depth') <= depth; })); }; var el = $(this); var tr = el.closest('tr'); var children = findChildren(tr); var subnodes = children.filter('.expand'); subnodes.each(function () { var subnode = $(this); var subnodeChildren = findChildren(subnode); children = children.not(subnodeChildren); }); if (tr.hasClass('collapse')) { tr.removeClass('collapse').addClass('expand'); children.hide(); } else { tr.removeClass('expand').addClass('collapse'); children.show(); } return children; }); });