title: Trouble with multi-level collapsible Bootstrap side-nav menu
body: <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>          &lt;div class="sidebar-nav"&gt;
        &lt;p class="sidenav-header"&gt;Units and Lessons:&lt;/p&gt;
        &lt;ul class="nav nav-list"&gt;
          &lt;li class="nav-header" data-toggle="collapse" data-target="#content-areas"&gt; &lt;span class="nav-header-primary"&gt;
                  Content Areas
          &lt;/span&gt;
              &lt;ul class="nav nav-list collapse" id="content-areas"&gt;
                  &lt;li&gt;&lt;a href="#" title="Title"&gt;All&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" title="Title"&gt;Urban Planning&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" title="Title"&gt;Sustainability&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" title="Title"&gt;Public Administration&lt;/a&gt;&lt;/li&gt;
                  &lt;li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas"&gt;&lt;a href="#" title="Title"&gt;Health&lt;/a&gt;
                    &lt;ul class="nav-secondary nav-list collapse" id="nav-health"&gt;
                      &lt;li&gt;&lt;a href="#" title="Title"&gt;Introduction&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" title="Title"&gt;Lesson: What is Epilepsy?&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" title="Title"&gt;Lesson: Pathology&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
            &lt;li class="nav-header" data-toggle="collapse" data-target="#languages"&gt; &lt;span class="nav-header-primary"&gt;
                  Languages
          &lt;/span&gt;
              &lt;ul class="nav nav-list collapse" id="languages"&gt;
                  &lt;li&gt;&lt;a href="#" title="Title"&gt;All&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" title="Title"&gt;Arabic&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" title="Title"&gt;Turkish&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" title="Title"&gt;Hebrew&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;  
  
        &lt;/div&gt;
  </code></pre>
  
  <p>The specific section I'm talking about is under the "Health" list item under "Content Areas".</p>
  
  <p>Any help is greatly appreciated. Thanks!</p>