title: click on one drop down menu and close all other drop downs (vanilla javascript)
body: <p>Hi I am new to vanilla JavaScript and trying to get a good understanding of it. I've created a multiple drop down menu navigation where the menus are triggered by a click event when the drop down buttons are clicked, a <code>.show</code> CSS class with the display property of block is added to the drop menu. The problem I'm having is that when I have one menu open and I click on another drop menu button, I want the current/all other menus to close. I'm not sure quite how I would achieve this. Any help is greatly appreciated, thanks.</p>
  
  <p>Here is the JS:</p>
  
  <pre><code>(function() {
  
    var dropBtns = document.querySelectorAll('.dropdown');
  
    dropBtns.forEach(function(btn) {
  
      btn.addEventListener('click', function(e) {
        var dropContent = btn.querySelector('.dropMenu');
        e.preventDefault();
  
        if (!dropContent.classList.contains('show')) {
          dropContent.classList.add('show');
        } else {
          dropContent.classList.remove('show');
        }
        e.stopPropagation();
      });
  
  
    });
  
    //   close menus when clicking outside of them
    window.addEventListener('click', function(event) {
      if (event.target != dropBtns) {
        openMenus = document.querySelectorAll('.dropMenu');
        openMenus.forEach(function(menus) {
          menus.classList.remove('show');
        });
      }
    });
  
  })();
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.room-sort {
    background: #434A54;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  
  .room-sort-menu ul {
    margin: 0;
    padding: 0;
  }
  
  span.sort {
    margin-right: 30px;
    color: #fff;
    font-weight: 500;
  }
  
  .sort-mobile {
    display: none;
  }
  
  .room-sort-menu&gt;li {
    display: inline-block;
    color: #fff;
  }
  
  .room-sort-menu&gt;li&gt;a {
    display: inline-block;
    padding: 16px 30px;
    margin: 0;
    font-size: 0.8em;
    color: #fff;
    text-decoration: none;
  }
  
  .room-sort-menu&gt;li&gt;a:hover,
  .room-sort-menu&gt;li&gt;a:focus {
    background: #2e333a;
  }
  
  .dropdown {
    position: relative;
  }
  
  .dropMenu {
    position: absolute;
    display: none;
    top: 46px;
    left: 0px;
    border: 1px solid color;
    width: 109px;
    background: #CB242D;
    font-size: 0.8em;
    z-index: 1;
  }
  
  .show {
    display: block;
  }
  
  .room-sort-menu li:last-of-type ul.dropMenu {
    width: 166px;
  }
  
  .dropMenu li a {
    display: block;
    padding: 16px 20px;
    color: #fff;
    text-decoration: none;
  }
  
  .dropMenu li a:hover {
    background: #a0080d;
  }
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;div class="room-sort"&gt;
  
    &lt;ul class="room-sort-menu"&gt;
  
      &lt;span class="sort"&gt;Sort by :&lt;/span&gt;
      &lt;li class="dropdown"&gt;&lt;a class="dropBtn" href="#"&gt;Price &lt;i class="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;ul class="dropMenu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Price (hi to low)&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Price (low to hi)&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="dropdown"&gt;&lt;a class="dropBtn" href="#"&gt;Stars &lt;i class="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;ul class="dropMenu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Stars (hi to low)&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Stars (low to hi)&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li class="dropdown"&gt;&lt;a class="dropBtn" href="#"&gt;Review score &lt;i class="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;ul class="dropMenu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Score (hi to low)&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Score (low to hi)&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>