Trouble with multi-level collapsible Bootstrap side-nav menu

Question

I've been combing around looking for an example of the same problem I'm having but no luck yet. I'm trying to create a multi-level collapsible side navigation in bootstrap using bootstrap.js.

My problem is that I've added in the second level but when I click the list item to trigger it to open it collapses the whole menu. When I re-open the menu, the second-level menu is open also. 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 is under the "Health" list item under "Content Areas".

Any help is greatly appreciated. Thanks!

Answer 1

The problem with your markup is that whole menu is collapsed when you try to click within the list. For example, if you click All inside of Content Areas it collapse the Content Areas. The same is happening for the second level menu, Health in your case.

This is caused because you don't have an accordion-heading specified. Take a look into Bootstrap Collapse Documentation where you will find an example like this:

<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 heading your second level nav should work fine.

I have created a fiddle for you to verify. I modified the Content Areas according to the Documentation and the second level menu worked fine. However, I did not modify the Languages menu items so that you can see how it's acting (try clicking within the list once the Languages is expanded)

Answer 2

While Similar to Pitamber's example I would not add some of the extra classes, especially the extra div with class "accoridan-heading", just apply that class to the a tag as so.

<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 further and add CSS and or some JS to place some contrast on the sub-menu and also to flip/change the caret icon when a menu item is expanded and collapsed.