Problem with Bootstrap's multi-level collapsible navigation menu

Question

I combed, looking for an example of the same problem as mine, but so far no luck. I am trying to create multi-level collapsible side navigation in bootstrap using bootstrap.js.

My problem is that I added to the second level, but when I click on a list item to call it to open it, it destroys the entire menu. When I open the menu again, the second level menu opens. My code is below:

<div class="sidebar-nav"> <p class="sidenav-header">Units and Lessons:</p> <ul class="nav nav-list"> <li class="nav-header" data-toggle="collapse" data-target="#content-areas"> <span class="nav-header-primary"> Content Areas </span> <ul class="nav nav-list collapse" id="content-areas"> <li><a href="#" title="Title">All</a></li> <li><a href="#" title="Title">Urban Planning</a></li> <li><a href="#" title="Title">Sustainability</a></li> <li><a href="#" title="Title">Public Administration</a></li> <li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas"><a href="#" title="Title">Health</a> <ul class="nav-secondary nav-list collapse" id="nav-health"> <li><a href="#" title="Title">Introduction</a></li> <li><a href="#" title="Title">Lesson: What is Epilepsy?</a></li> <li><a href="#" title="Title">Lesson: Pathology</a></li> </ul> </li> </ul> </li> <li class="nav-header" data-toggle="collapse" data-target="#languages"> <span class="nav-header-primary"> Languages </span> <ul class="nav nav-list collapse" id="languages"> <li><a href="#" title="Title">All</a></li> <li><a href="#" title="Title">Arabic</a></li> <li><a href="#" title="Title">Turkish</a></li> <li><a href="#" title="Title">Hebrew</a></li> </ul> </li> </ul> </div> 

The specific section I'm talking about relates to the Health list item in the Content Areas section.

Any help is appreciated. Thanks!

Answer 1

The problem with your markup is that when you try to click in the list, the entire menu crashes. For example, if you click "Everything inside content areas", this will crash the content areas. The same thing happens for the second level menu, "Health" in your case.

This is because you do not have an accordion pointer. Take a look at the Bootstrap Failure Documentation , where you will find an example:

 <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> Collapsible Group Item #1 </a> 

Once you specify the title, your second level should work fine.

I created a fiddle to check. I changed the content areas according to the Documentation , and the second level menu worked fine. However, I did not change the menu items "Languages" so you can see how this works (try clicking on the list after expanding the languages)

Answer 2

While similar to the Pitamber example, I would not add some additional classes, especially an additional div with the "accoridan-heading" class, just apply this class to the a tag itself.

 <ul class="nav nav-list"> <li> <a>Menu Item with No Sub-Items</a> </li> <li> <a class="accordion-heading" data-toggle="collapse" data-target="#submenu"> <span class="nav-header-primary">Menu Item with Sub-Items <b class="caret"></b></span> </a> <ul class="nav nav-list collapse" id="submenu"> <li><a href="#" title="Title">Sub Item 1</a></li> <li><a href="#" title="Title">Sub Item 2</a></li> <li><a href="#" title="Title">Sub Item 3</a></li> <li><a href="#" title="Title">Sub Item 4</a></li> </ul> </li> </ul> 

You can go ahead and add CSS and / or JS to put some contrast in the submenu, and also flip / change the caret icon when the menu item is expanded and compensated.