"BootStrap TreeView"
Bootstrap 3.3.0 Snippet by chhingchhing

<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 ----------> <ul class="tree"> <li><a href="#">TECH</a> <ul> <li>Company Maintenance</li> <li>Employees <ul> <li>Reports <ul> <li>Report1</li> <li>Report2</li> <li>Report3</li> </ul> </li> <li>Employee Maint.</li> </ul> </li> <li>Human Resources</li> </ul> </li> <li>XRP <ul> <li>Company Maintenance</li> <li>Employees <ul> <li>Reports <ul> <li>Report1</li> <li>Report2</li> <li>Report3</li> </ul> </li> <li>Employee Maint.</li> </ul> </li> <li>Human Resources</li> </ul> </li> </ul>
.tree, .tree ul { margin:0; padding:0; list-style:none } .tree ul { margin-left:1em; position:relative } .tree ul ul { margin-left:.5em } .tree ul:before { content:""; display:block; width:0; position:absolute; top:0; bottom:0; left:0; border-left:1px solid } .tree li { margin:0; padding:0 1em; line-height:2em; color:#369; font-weight:700; position:relative } .tree ul li:before { content:""; display:block; width:10px; height:0; border-top:1px solid; margin-top:-1px; position:absolute; top:1em; left:0 } .tree ul li:last-child:before { background:#fff; height:auto; top:1em; bottom:0 } .indicator { margin-right:5px; } .tree li a { text-decoration: none; color:#369; } .tree li button, .tree li button:active, .tree li button:focus { text-decoration: none; color:#369; border:none; background:transparent; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; outline: 0; }
$.fn.extend({ treed: function() { return this.each(function() { //initialize each of the top levels var tree = $(this); tree.addClass("tree"); tree.find('li').has("ul").each(function () { var branch = $(this); //li with children ul branch.prepend("<i class='indicator glyphicon glyphicon-plus-sign'></i>"); branch.addClass('branch'); branch.on('click', function (e) { if (this == e.target) { var icon = $(this).children('i:first'); icon.toggleClass("glyphicon-minus-sign glyphicon-plus-sign"); $(this).children().children().toggle(); } }) branch.children().children().toggle(); }); //fire event from the dynamically added icon $('.branch .indicator').on('click',function(){ $(this).closest('li').click(); }); //fire event to open branch if the li contains an anchor instead of text $('.branch a').on('click',function(e){ $(this).closest('li').click(); e.preventDefault(); }); //fire event to open branch if the li contains a button instead of text $('.branch button').on('click',function(e){ $(this).closest('li').click(); e.preventDefault(); }); }); } }); $('.tree').treed();

Related: See More

Questions / Comments: