<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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="well span3"> <div id="accordionOne"> <ul class="nav nav-list"> <li><a class="tree-toggler"><i class="fa fa-chevron-right"></i> WorkLoad</a> <ul class="nav nav-list tree in"> <li><a class="tree-toggler"><i class="fa fa-chevron-right"></i> DME Report</a> <ul class="nav nav-list tree in"> <li><a href="#">DME Report</a></li> <li><a href="#">CAMB Report</a></li> <li><a href="#">LMAB Report</a></li> <li><a href="#">DMF Notification</a></li> <li><a href="#">LME Forecast Report</a></li> </ul> </li> <li><a href="#">CAMB Report</a></li> <li><a href="#">LMAB Report</a></li> <li><a href="#">DMF Notification</a></li> <li><a href="#">LME Forecast Report</a></li> </ul> </li> <li><a class="tree-toggler"><i class="fa fa-chevron-right"></i> Performance</a> <ul class="nav nav-list tree"> <li><a href="#">Calendar</a></li> <li><a href="#">Efficiency</a></li> <li><a href="#">Process Age</a></li> <li><a href="#">DME Audit</a></li> <li><a href="#">Condition Detected At DME</a></li> </ul> </li> <li><a class="tree-toggler"><i class="fa fa-chevron-right"></i> Customers</a> <ul class="nav nav-list tree"> <li><a href="#">Demography</a></li> <li><a href="#">Feedback</a></li> </ul> </li> <li><a class="tree-toggler"><i class="fa fa-chevron-right"></i> Licensing</a> <ul class="nav nav-list tree"> <li><a href="#">Assessment Status</a></li> </ul> </li> <li><a class="tree-toggler"><i class="fa fa-chevron-right"></i> Medical Stats</a> <ul class="nav nav-list tree"> <li><a href="#">Diagnosis Report</a></li> <li><a href="#">Measurement and Investigation Report</a></li> <li><a href="#">Health Risk Report</a></li> </ul> </li> <li><a class="tree-toggler"><i class="fa fa-chevron-right"></i> Admin</a> <ul class="nav nav-list tree"> <li><a href="#">Revenue Report</a></li> <li><a href="#">Applicant Activity Report</a></li> <li><a href="#">Login Activity Report</a></li> </ul> </li> </div> </div> </div> </div>

$(document).ready(function () { $('a.tree-toggler').click(function () { $(this).parent().children('ul.tree').toggle(300); $(this).parent().children('i.fa fa-chevron-right').removeClass("fa-chevron-right").addClass("fa-chevron-down"); $(this).parent().children('i.fa fa-chevron-down').removeClass("fa-chevron-down").addClass("fa-chevron-right"); }); $('ul.tree').toggle(300); $('ul.tree.in').toggle(300); });