"Collapsible Tree Menu"
Bootstrap 2.3.2 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><label class="tree-toggler nav-header">Header 1.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><label class="tree-toggler nav-header">Header 1.1.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </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><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><label class="tree-toggler nav-header">Header 2.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><label class="tree-toggler nav-header">Header 2.1.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> <li><label class="tree-toggler nav-header">Header 2.2</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><label class="tree-toggler nav-header">Header 2.2.1</label> <ul class="nav nav-list tree"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div> </div>
$(document).ready(function () { $('label.tree-toggler').click(function () { $(this).parent().children('ul.tree').toggle(300); }); });

Related: See More


Questions / Comments:

How do i make the contents hidden first?

AndrewKZY (-3) - 1 month ago - Reply -3


http://jsfiddle.net/dbrin/S...

nvm i saw this link below thanks

AndrewKZY (-3) - 1 month ago - Reply 0


I might be going mad but where's the styling?

Michael McDonald (0) - 4 years ago - Reply 0


maxsurguy (0) - 4 years ago - Reply 0


It's in the bootstrap css

Springboard SEO (0) - 4 years ago - Reply 0


how do i set items to be closed until click?

Royal Privateer (0) - 5 years ago - Reply 0


zztop2 (0) - 4 years ago - Reply 0


set 'display' to 'none' for ul.tree

Sergey Kasyanov (0) - 5 years ago - Reply 0


Doesn't work yet...

Leo (0) - 5 years ago - Reply 0


Sergey Kasyanov (0) - 5 years ago - Reply 0


slight modification with Icons

http://jsfiddle.net/dbrin/S...

zztop2 (0) - 4 years ago - Reply 0


That would get a little more complicated but on the other hand maybe try the ogirinal Bootstrap collapsible way?

maxsurguy (0) - 5 years ago - Reply 0


afair bootstrap doesn't have collapsible menu

Sergey Kasyanov (0) - 5 years ago - Reply 0


collapsible menu example: http://jsfiddle.net/zzJ4w/13/

collapsible (0) - 4 years ago - Reply 0


It has collapsible element : http://twitter.github.io/bo... I will try to make a new snippet showing how to use this with the menu like the one above.

maxsurguy (0) - 5 years ago - Reply 0