title: How to close all other open sub-menu when other parent menu item is clicked?
body: <p>I am using this code <a href="https://bootsnipp.com/snippets/featured/responsive-navigation-menu" rel="nofollow noreferrer">LINK</a>.</p>
  
  <p>When i click on <code>Parent Menu</code> like <code>Services</code> then <code>sub-menu</code> of services menu will be open but when i click on other menu then other sub menu will also open.
  I want when i click on other sub menu then previous sub-menu will be close.
  Kindly provide me solution for this.
  Thank you</p>
  
  <pre><code> &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"&gt;
   &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt; 
    &lt;/script&gt;
    &lt;script src="//code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
   &lt;!------ Include the above in your HEAD tag ----------&gt;
   &lt;link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;
  
   &lt;div class="nav-side-menu"&gt;
  &lt;div class="brand"&gt;Brand Logo&lt;/div&gt;
  &lt;i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"&gt;&lt;/i&gt;
  
      &lt;div class="menu-list"&gt;
  
          &lt;ul id="menu-content" class="menu-content collapse out"&gt;
              &lt;li&gt;
                &lt;a href="#"&gt;
                &lt;i class="fa fa-dashboard fa-lg"&gt;&lt;/i&gt; Dashboard
                &lt;/a&gt;
              &lt;/li&gt;
  
              &lt;li  data-toggle="collapse" data-target="#products" class="collapsed active"&gt;
                &lt;a href="#"&gt;&lt;i class="fa fa-gift fa-lg"&gt;&lt;/i&gt; UI Elements &lt;span class="arrow"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;ul class="sub-menu collapse" id="products"&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;CSS3 Animation&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;General&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Buttons&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Tabs &amp; Accordions&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Typography&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;FontAwesome&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Slider&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Panels&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Widgets&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Bootstrap Model&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;li data-toggle="collapse" data-target="#service" class="collapsed"&gt;
                &lt;a href="#"&gt;&lt;i class="fa fa-globe fa-lg"&gt;&lt;/i&gt; Services &lt;span class="arrow"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;  
              &lt;ul class="sub-menu collapse" id="service"&gt;
                &lt;li&gt;New Service 1&lt;/li&gt;
                &lt;li&gt;New Service 2&lt;/li&gt;
                &lt;li&gt;New Service 3&lt;/li&gt;
              &lt;/ul&gt;
              &lt;li data-toggle="collapse" data-target="#new" class="collapsed"&gt;
                &lt;a href="#"&gt;&lt;i class="fa fa-car fa-lg"&gt;&lt;/i&gt; New &lt;span class="arrow"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;ul class="sub-menu collapse" id="new"&gt;
                &lt;li&gt;New New 1&lt;/li&gt;
                &lt;li&gt;New New 2&lt;/li&gt;
                &lt;li&gt;New New 3&lt;/li&gt;
              &lt;/ul&gt;
               &lt;li&gt;
                &lt;a href="#"&gt;
                &lt;i class="fa fa-user fa-lg"&gt;&lt;/i&gt; Profile
                &lt;/a&gt;
                &lt;/li&gt;
  
               &lt;li&gt;
                &lt;a href="#"&gt;
                &lt;i class="fa fa-users fa-lg"&gt;&lt;/i&gt; Users
                &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>