title: Bootstrap collapse : Close all children when root element is closed
body: <p>I'm using Bootstrap's collapse , by specifying <code>data-toggle</code> and <code>href</code> properties in my HTML tags. Using this, I built a multi-level collapsible list. This is the problem I'm facing:<br>
  Let's say Level 2 is the root, with Level 1 as the child of Level 2, and Level 0 as the child of Level 1. So we have a 2-level hierarchy. Initially, only Level 2 is shown ,with all children collapsed. When I click on Level 2, Level 1 is opened. Then, when I click on Level 1, Level 0 opens up. So far, fine. Now when I close Level 2, only Level 2 is shown as expected. But, the lower levels are not collapsed, <strong>they're only hidden</strong>. If I open Level 2 again, it shows me both Level 1 and Level 0 (as Level 0 was opened previously).  </p>
  
  <p>I want it such that when Level 2 is clicked, only Level 1 is shown always, not Level 0. Level 0 should be shown only when Level 1 is clicked.  </p>
  
  <p>Here's the code:  </p>
  
  <pre><code>        &lt;a href="#target1" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu"&gt;{{.}}&lt;/a&gt;
          &lt;div class="collapse" id="target1"&gt;
                      &lt;a href="target2" class="list-group-item" data-toggle="collapse"&gt;{{state}}&lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;div class="collapse list-group-submenu" id="target2"&gt;
                            &lt;a href="#" class="list-group-item" data-toggle="collapse"&gt;{{name}}&lt;/a&gt;
                      &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>