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

<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 class="dropdown edit"> <a class="dropdown-toggle icon-pencil" data-toggle= "dropdown" href="#" style="font-style: italic"></a> <ul class="dropdown-menu"> <!-- Adicionar equipamento --> <li> <a href="../equipamento/add.php"><i class= "icon-plus"></i> Adicionar equipamento</a> </li> <li class="divider"></li><!-- Editar área --> <li> <a href="../area/edit.php"><i class= "icon-pencil"></i> Editar área</a> </li> <li class="divider"></li><!-- Remover área --> <li> <a class="danger" href="#remove"><i class= "icon-remove"></i> Remover área</a> </li> </ul> </div> </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 class="accordion-toggle" data-parent= "#equipamento1-1" data-toggle="collapse" href= "#ponto1-1">Equipamento #1-1</a> <div class="dropdown edit"> <a class="dropdown-toggle icon-pencil" data-toggle="dropdown" href="#" style= "font-style: italic"></a> <ul class="dropdown-menu"> <!-- Adicionar ponto --> <li> <a href= "../ponto/add.php"><i class="icon-plus"> </i> Adicionar ponto</a> </li> <li class="divider"></li> <!-- Editar equipamento --> <li> <a href= "../equipamento/edit.php"><i class= "icon-pencil"></i> Editar equipamento</a> </li> <li class="divider"></li> <!-- Remover equipamento --> <li> <a class="danger" href= "#remove"><i class= "icon-remove"></i> Remover equipamento</a> </li> </ul> </div> </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 class="dropdown edit"> <a class= "dropdown-toggle icon-pencil" data-toggle="dropdown" href="#" style= "font-style: italic"></a> <ul class="dropdown-menu"> <!-- Adicionar servico --> <li> <a href= "../servico/add.php"> <i class= "icon-plus"></i> Adicionar servico</a> </li> <li class="divider"> </li><!-- Editar ponto --> <li> <a href= "../ponto/edit.php"> <i class= "icon-pencil"></i> Editar ponto</a> </li> <li class="divider"> </li><!-- Remover ponto --> <li> <a class="danger" href= "#remove"><i class= "icon-remove"></i> Remover ponto</a> </li> </ul> </div> </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> </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; }

Related: See More


Questions / Comments:

That's awesome. Can you extend this plugin to add panels dynamically to the parent panel like a treeview

Adam Eve () - 2 years ago - Reply -1


Very Good! How can I make the menu is not closed in section after the click to him? I mean active item, open current tree after refresh. Thank`s )

Ivan Minin () - 4 years ago - Reply 0


Good stuff, thank you :)

mor0ntt () - 4 years ago - Reply 0


Is there accompanying code to dynamically add/delete/rename nodes or is the edit icon and menu for show? I'd love to use this control, if it's possible...

Rob Wiltbank () - 5 years ago - Reply 0


You could do something like that with Backbone.JS MVC framework or Angular JS.

maxsurguy () - 5 years ago - Reply 0


Nice work man.
thanks. it really work for me.

Saurabh Patel () - 5 years ago - Reply 0


awesome!!!.... work for me... tanks. :)

carlos. () - 5 years ago - Reply 0


Thanks Buddy..nice work
It can be used in documentation page or help page....excellent.

Ashwin Hegde () - 5 years ago - Reply 0


Great! :D

david () - 5 years ago - Reply 0


cool

Heru Brondong () - 5 years ago - Reply 0


It's me or this is buggy as hell ?
Thanks anyway

LESUEUR Jean-Pierre () - 5 years ago - Reply 0


It's buggy as hell.

David Zadražil () - 5 years ago - Reply 0


Ah okay. P.s I suggest for image hosting of examples, or screengrabs Imgur.com and/or Droplr. Droplr is cool (and is actually paid, but there's a free tier) because you can select a portion of the screen and it works on your desktop too.e.g I just took a shot of a piece of my taskbar: http://d.pr/i/qmGX - if you want the free version, with 200MB extra free space which we both get, use this ref link https://droplr.com/join/o5U...

hatemale () - 5 years ago - Reply 0


so... it's buggy as hell? give a straight answer please is it buggy as hell?

hatemale () - 5 years ago - Reply 0


It is ! at least on FireFox for sure but on Chrome is works fine

LESUEUR Jean-Pierre () - 5 years ago - Reply 0


what is firefox?

angelxmoreno () - 5 years ago - Reply 0


Firstly it imposible to toggle it back. Secondly the div element is not flexible as you can see on the picture - http://i48.tinypic.com/v2r5...

David Zadražil () - 5 years ago - Reply 0