<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <div class="well" style="width:300px; padding: 8px 0;"> <div style="overflow-y: scroll; overflow-x: hidden; height: 500px;"> <ul class="nav nav-list"> <li><label class="tree-toggler nav-header">Header 1</label> <ul class="nav nav-list tree"> <li><label class="tree-toggler nav-header">Sub Header 1.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><label class="tree-toggler nav-header">Sub Header 1.2</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> <li class="divider"></li> <li><label class="tree-toggler nav-header">Header 2</label> <ul class="nav nav-list tree"> <li><label class="tree-toggler nav-header">Sub Header 2.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><label class="tree-toggler nav-header">Sub Header 2.2</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </div> </div>

ul.show { display:block !important; } .tree { display:none; } .tree-toggler { padding: 5px; padding-right: 0px; cursor: pointer; width: 100%; } ul { padding: 5px; padding-right: 0px; background-color: red; } ul ul { padding: 5px; padding-right: 0px; background-color: blue; } a { padding: 5px; padding-right: 0px; background-color: grey; color: black; }

$(document).ready(function () { $(document).on('click', '.tree-toggler', function () { $(this).parent().children('ul.tree').toggleClass('show', 300); $(this).parent().siblings('li').find('.show').removeClass('show'); }); });