title: bootstrap 3 multiple nav items opening at once
body: <p>I'm trying to get multiple navigations working using bootstrap 3. Currently I have an issue where the first menu clicked (i.e. the burger menu on the left - see attached images) opens all  the menu items. The next click closes all the items then subsequent clicks behave as expected with one menu item open at a time.</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top" id="#navGroup"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row" id="navGroup"&gt;
              &lt;div class="navbar-header col-xs-4"&gt;
                  &lt;button type="button" class="navbar-toggle navbar-left" data-toggle="collapse" data-target=".burger-collapse" data-parent="#navGroup"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="navbar-header col-xs-4"&gt;
                  &lt;a class="navbar-brand" href='@Url.Action("Home", "Home")'&gt;
                  &lt;i class="glyphicon glyphicon-home logo-glyph"&gt;&lt;/i&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="navbar-header col-xs-4"&gt;
                  &lt;button class="navbar-toggle glyphicon air-listing-nav glyphicon-user" data-toggle="collapse" data-target=".profile-collapse" data-parent="#navGroup"&gt;&lt;/button&gt;
                  &lt;button class="navbar-toggle glyphicon air-listing-nav glyphicon-bell" data-toggle="collapse" data-target=".notifications-collapse" data-parent="#navGroup"&gt;&lt;/button&gt;
                  &lt;button class="navbar-toggle glyphicon air-listing-nav glyphicon-question-sign" data-toggle="collapse" data-target=".help-collapse" data-parent="#navGroup"&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse burger-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;@Html.ActionLink("Home", "Home", "Home")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("Profile", "Profile", "Profile")&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div  class="navbar-collapse collapse navbar-right profile-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;@Html.ActionLink("Profile", "Profile", "Profile")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("Settings", "Settings", "ManageSettings")&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div  class="navbar-collapse collapse navbar-right notifications-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;@Html.ActionLink("Notifications", " ", "Profile")&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div  class="navbar-collapse collapse navbar-right help-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;@Html.ActionLink("Help", " ", "Profile")&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong>:</p>
  
  <pre><code>&lt;script&gt;    
      $(function () {
          $(document).click(function (event) {
              $('.navbar-collapse').collapse('hide');
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Attached Images</strong></p>
  
  <p><em>(please ignore styling issues for now, once the menus are working correctly I'll work on styles)</em> </p>
  
  <p><strong>Nav Itens Closed:</strong>
  <a href="https://i.stack.imgur.com/tPwQ5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tPwQ5.png" alt="enter image description here"></a></p>
  
  <p><strong>Click burger menu and All Nav items open</strong>
  <a href="https://i.stack.imgur.com/YNSUL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YNSUL.png" alt="enter image description here"></a></p>
  
  <p><strong>Should have just one menu open at a time</strong>
  <a href="https://i.stack.imgur.com/DAZtQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DAZtQ.png" alt="enter image description here"></a></p>
  
  <p>I've searched everywhere but can't find an answer that works for me. I am using data parent as suggested elsewhere &amp; have unique data-targets for each menu. </p>
  
  <p>Any help would be appreciated.  </p>