<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="col-md-3"> <div class="well" style="padding: 8px;"> <ul class="nav nav-list"> <li> <label class="tree-toggler nav-header"> <b> Guest </b> </label> <ul class="nav nav-list tree" style="display: block;"> <li> <a href="#"> Log IN </a> </li> <li> <a href="#"> Register </a> </li> <li> <label class="tree-toggler nav-header"> <b> section </b> </label> <ul class="nav nav-list tree"> <li> <a href="#"> Test </a> </li> </ul> </li> </ul> </li> </ul> </div> </div>

.tree > li > label { padding: 0 10px; } .tree { padding: 0 10px; } .nav-header { display: block; padding: 3px 15px; font-size: 11px; font-weight: bold; line-height: 20px; color: #999999; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-transform: uppercase; } .nav-list>li>a, .nav-list .nav-header { margin-left: -15px; margin-right: -15px; font-size: 11px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }

$(document).ready(function () { $('label.tree-toggler').click(function () { $(this).parent().children('ul.tree').toggle(300); }); $(function () { $('.tree-toggler').parent().children('ul.tree').toggle(200); }); });