title: Bootstrap list-group collapse on click event
body: <p>I needed a multi-level menu but Bootstrap don't provide anything like this, so I've made a menu/navbar based on list-group, and it works great, I can add multiple levels of submenus but I have on big problem, it won't collapse until I click on the "Pos1" (check bootply link) or other "Pos...".</p>
  
  <p>I need to solution so that when I click in every other part of the website that menu will collapse.</p>
  
  <p>Here is the code and below it you can find link to bootply:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div id="mainmenu" class="row"&gt;
            &lt;div class="list-group panel visible-md visible-lg"&gt;
                &lt;a href="#" class="list-group-item"&gt;&lt;i class="glyphicon glyphicon-home"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="list-group panel"&gt;
              &lt;a href="#menupos1" class="list-group-item" data-toggle="collapse" data-parent="#mainmenu"&gt;Pos1 &lt;span class="menu-ico-collapse"&gt;&lt;i class="glyphicon glyphicon-chevron-down"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;div class="collapse pos-absolute" id="menupos1"&gt;
                &lt;a href="#submenu1" class="list-group-item sub-item" data-toggle="collapse" data-parent="#submenu1"&gt;SubPos1 &lt;span class=" menu-ico-collapse"&gt;&lt;i class="glyphicon glyphicon-chevron-down"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;
                    &lt;div class="collapse list-group-submenu" id="submenu1"&gt;
                      &lt;a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1"&gt;SubSubPos1&lt;/a&gt;
                      &lt;a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1"&gt;SubSubPos2&lt;/a&gt;
                      &lt;a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1"&gt;SubSubPos3&lt;/a&gt;
                      &lt;a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1"&gt;SubSubPos4&lt;/a&gt;
                    &lt;/div&gt;
               &lt;a href="#" class="list-group-item sub-item"&gt;SubPos2&lt;/a&gt;
               &lt;a href="#" class="list-group-item sub-item"&gt;SubPos3&lt;/a&gt;
               &lt;a href="#" class="list-group-item sub-item"&gt;SubPos4&lt;/a&gt;
               &lt;a href="#" class="list-group-item sub-item"&gt;SubPos5&lt;/a&gt;                                                                    
                &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Demo: <a href="http://www.bootply.com/izpRKwzlYb" rel="nofollow">http://www.bootply.com/izpRKwzlYb</a></p>
  
  <p>It would be great if it only work in medium and large resolution because in xsmall and small it should stay still.</p>