"Collapsible tree menu with accordion"
Bootstrap 2.3.2 Snippet by miltonlbj

<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="span12"> <div class="menu"> <div class="accordion"> <!-- Áreas --> <div class="accordion-group"> <!-- Área --> <div class="accordion-heading area"> <a class="accordion-toggle" data-toggle="collapse" href="#area1">Área #1</a> </div><!-- /Área --> <div class="accordion-body collapse" id="area1"> <div class="accordion-inner"> <div class="accordion" id="equipamento1"> <div class="accordion-group"> <div class="accordion-heading equipamento"> <a class="accordion-toggle" data-parent="#equipamento1-1" data-toggle="collapse" href="#ponto1-1">Equipamento #1-1</a> </div><!-- Pontos --> <div class="accordion-body collapse" id="ponto1-1"> <div class="accordion-inner"> <div class="accordion" id="servico1"> <div class="accordion-group"> <div class="accordion-heading ponto"> <a class="accordion-toggle"data-parent="#servico1-1-1" data-toggle="collapse" href="#servico1-1-1">Ponto #1-1-1</a> </div><!-- Serviços --> <div class="accordion-body collapse" id="servico1-1-1"> <div class="accordion-inner"> <ul class="nav nav-list"> <li> <a href="#"><i class="icon-chevron-right"> </i> Serviço #1-1-1-1</a> </li> <li> <a href="#"><i class="icon-chevron-right"></i> Serviço#1-1-1-2</a> </li> <li> <a href="#"><i class="icon-chevron-right"></i> Serviço#1-1-1-3</a> </li> </ul> </div> </div><!-- /Serviços --> </div> </div> <!--- ---> <div class="accordion" id="servico1"> <div class="accordion-group"> <div class="accordion-heading ponto"> <a class="accordion-toggle"data-parent="#servico2-1-1" data-toggle="collapse" href="#servico2-1-1">Ponto #2-1-1</a> </div><!-- Serviços --> <div class="accordion-body collapse" id="servico2-1-1"> <div class="accordion-inner"> <ul class="nav nav-list"> <li> <a href="#"><i class="icon-chevron-right"> </i> Serviço #2-1-1-1</a> </li> <li> <a href="#"><i class="icon-chevron-right"></i> Serviço#2-1-1-2</a> </li> <li> <a href="#"><i class="icon-chevron-right"></i> Serviço#2-1-1-3</a> </li> </ul> </div> </div><!-- /Serviços --> </div> </div> </div> </div><!-- /Pontos --> </div><!-- /Equipamentos --> </div> </div> </div> </div> </div><!-- /accordion --> </div> </div> </div> </div>
.menu .collapse.in { overflow: visible; }

Related: See More


Questions / Comments: