title: Bootstrap 4 navbar collapse hide open others
body: <p>I made a navbar that collapses in mobile view with 4 icons/buttons. </p>
  
  <p>When I press one button it's expanding perfect, but when I press the second button the first stays expanded. I want to hide that so it only shows one expanded area (so in the picture hide "inloggen" when the uses presses search).</p>
  
  <blockquote>
    <p><a href="https://i.stack.imgur.com/y7qnB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/y7qnBm.png" alt="example of current result"></a></p>
  </blockquote>
  
  <p>Here is the markup that shows what I currently have:</p>
  
  <pre><code>&lt;nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark justify-content-center navigatie-balk"&gt;
      &lt;div class="container d-flex flex-wrap"&gt;
          &lt;!--- logo ---&gt;
          &lt;div class="justify-content-start" id="div-logo"&gt;
              &lt;a class="navbar-brand" href="&lt;?php echo $this-&gt;url('home'); ?&gt;" target="_self"&gt;
                  &lt;img src="&lt;?= $this-&gt;basePath('img/logo.png') ?&gt;"/&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;!-- buttons/hamburger menu --&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#button1" style="margin-top: 12px;"&gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#div-zoeken" style="margin-top: 12px;"&gt;
                  &lt;span class="navbar-toggler-icon" id="zoeken-toggle"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#inloggen" style="margin-top: 12px;"&gt;
                  &lt;span class="navbar-toggler-icon" id="inloggen-toggle"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#plaatsen" style="margin-top: 12px;"&gt;
                  &lt;span class="navbar-toggler-icon" id="plaatsen-toggle"&gt;&lt;/span&gt;
              &lt;/button&gt;                
          &lt;!-- Zoeken --&gt;
          &lt;div class="collapse navbar-collapse justify-content-center" id="div-zoeken"&gt;
              &lt;ul class="navbar-nav"&gt;
              &lt;li class="nav-item active"&gt;
                  &lt;form class="navbar-form" role="search"&gt;
                      &lt;div class="input-group" style="height: 30px;"&gt;
                          &lt;input type="text" class="form-control" placeholder="Zoeken..." style="border: none;width: 250px;"&gt;
                          &lt;span class="input-group-btn"&gt;
                              &lt;button type="submit" class="btn btn-light" style="border-radius: 0px 3px 3px 0px;padding:0px 5px 3px 5px;height: 30px;"&gt;&lt;img src="&lt;?= $this-&gt;basePath('img/magnifying-glass-6x.png') ?&gt;" style="height: 16px;"/&gt;&lt;/button&gt;                
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/li&gt;
              &lt;/ul&gt; 
          &lt;/div&gt;
          &lt;!--- plaatsen en inloggen --&gt;
          &lt;div class="flex-column justify-content-end" id="div-plaatsen"&gt;
              &lt;button type="button" class="btn btn-light btn-primary btn-sm" id="advertentie-plaatsen" style="height: 25px; padding:0px 10px 0px 10px;"&gt;Advertentie plaatsen&lt;/button&gt;
              &lt;div class="collapse navbar-collapse" id="plaatsen" style="float: left;"&gt;
                  &lt;ul class="nav navbar-nav" style="font-size: 14px;"&gt;
                      &lt;li class="nav-item active" id="plaatsen-link"&gt;
                          &lt;a class="nav-link"href="#"&gt;&lt;img src="&lt;?= $this-&gt;basePath('img/plaatsen-advertentie.png') ?&gt;"&gt;&amp;nbsp;&amp;nbsp;Advertentie plaatsen&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item active"&gt;
                          &lt;a class="nav-link"href="#"&gt;&lt;img src="&lt;?= $this-&gt;basePath('img/briefcase.png') ?&gt;"&gt;&amp;nbsp;&amp;nbsp;Bedrijfsvermelding&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;    
              &lt;/div&gt;
              &lt;div class="collapse navbar-collapse" id="inloggen" style="float: right;"&gt;
                  &lt;ul class="nav navbar-nav" style="font-size: 14px;"&gt;
                      &lt;li class="nav-item active"&gt;
                          &lt;a class="nav-link" href="&lt;?= $this-&gt;basePath('inloggen') ?&gt;"&gt;&lt;img src="&lt;?= $this-&gt;basePath('img/person-2x.png') ?&gt;"&gt;&amp;nbsp;&amp;nbsp;Inloggen&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;    
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>