<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="container"> <div class="row"> <div class="col-md-12"> <div class="sidebar-nav"> <div class="accordion"> <!-- Áreas --> <div class="accordion-group"> <!-- Área --> <div class="accordion-heading area"> <a class="accordion-toggle" data-toggle="collapse" href= "#area1">Visit</a> </div><!-- /Área --> <div class="accordion-body collapse" id="area1"> <div class="accordion-inner"> <div class="accordion" id="equipamento1"> <!-- Equipamentos --> <div class="accordion-group"> <div class="accordion-heading equipamento"> <a data-parent= "#equipamento1-1" data-toggle="collapse" href= "#ponto1-1">Aggieland Saturday</a> </div> <div class="accordion-heading equipamento"> <a data-parent= "#equipamento1-1" data-toggle="collapse" href= "#ponto1-1">Regional Centers</a> </div><!-- Pontos --> </div><!-- /Equipamentos --> </div> </div> </div> </div> </div><!-- /accordion --> </div> </div> </div> </div>

.menu .accordion-heading { position: relative; } .menu .accordion-heading .edit { position: absolute; top: 8px; right: 30px; } .menu .area { border-left: 4px solid #f38787; } .menu .equipamento { border-left: 4px solid #65c465; } .menu .ponto { border-left: 4px solid #98b3fa; } .menu .collapse.in { overflow: visible; }