title: Close the dropdown menu if the user clicks on the second dropdown link
body: <p>I have a navigation bar with multiple drop downs. So when I click on the first link it opens the drop down, but when I click on the second link, the first drop down doesn't close. (so I want to close the drop down menu if the user clicks on second link)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// main.js (javascript file)
  
  function myFunction() {
    var x = document.getElementById("myTopnav1");
    if (x.className === "topnav1") {
      x.className += " responsive1";
    } else {
      x.className = "topnav1";
    }
  }
  
  function toggleDropDown(myid) {
    var element = document.getElementById(myid);
    element.classList.toggle("mystyle");
  }
  
  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn1')) {
  
      var dropdowns = document.getElementsByClassName("dropdown-content1");
      var i;
      for (i = 0; i &lt; dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('mystyle')) {
          openDropdown.classList.remove('mystyle');
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* style.css (css file - css is all correct if anything you think is not added i only need help with javascript) */
  
  .topnav1 {
    background-color: blue !important;
  }
  
  /* Style the links inside the navigation bar */
  
  .topnav1 a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 4px 8px;
    text-decoration: none;
    font-size: 10px;
    border-bottom: 1px solid #FDFDFD;
  }
  
  .topnav-right1 {
    float: right;
  }
  
  @media only screen and (max-width:768px) {
    .topnav-right1 {
      float: left;
    }
  }
  
  .para-active {
    background-color: #4F7ADA !important;
    color: black !important;
  }
  
  .para-active button {
    color: white !important;
  }
  
  /* Add an active class to highlight the current page */
  
  .active1 {
    color: black !important;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  
  .topnav1 .icon {
    display: none;
  }
  
  /* Dropdown container - needed to position the dropdown content */
  
  .dropdown1 {
    float: left;
    overflow: hidden;
    background-color: #f1f1f1;
    border-bottom: 1px solid #E3E3E3;
  }
  
  /* Style the dropdown button to fit inside the topnav */
  
  .dropdown1 .dropbtn1 {
    font-size: 10px;
    border: none;
    outline: none;
    color: black;
    padding: 4px 8px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    border-bottom: 1px solid #FDFDFD;
  }
  
  /* Style the dropdown content (hidden by default) */
  
  .dropdown-content1 {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 96px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  
  .mystyle {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="topnav1" id="myTopnav1"&gt;
    &lt;div class="dropdown1"&gt;
      &lt;button style="display: none;" id="btn_em" onclick="toggleDropDown('div_em')" class="dropbtn1"&gt;Meters 
                  &lt;/button&gt;
      &lt;div class="dropdown-content1" id="div_em"&gt;
        &lt;label class="dropnav-container"&gt;one&lt;/label&gt;
        &lt;label class="dropnav-container"&gt;one&lt;/label&gt;
        &lt;label class="dropnav-container"&gt;one&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dropdown1"&gt;
      &lt;button id="btn_inv" onclick="toggleDropDown('div_inv')" class="dropbtn1"&gt;Inverters 
                  &lt;/button&gt;
      &lt;div class="dropdown-content1" id="div_inv"&gt;
        &lt;label class="dropnav-container"&gt;two&lt;/label&gt;
        &lt;label class="dropnav-container"&gt;two&lt;/label&gt;
        &lt;label class="dropnav-container"&gt;two&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dropdown1"&gt;
      &lt;button id="btn_inm" onclick="toggleDropDown('div_inm')" class="dropbtn1"&gt;Inverter Manager 
                  &lt;/button&gt;
      &lt;div class="dropdown-content1" id="div_inm"&gt;
        &lt;label class="dropnav-container"&gt;three&lt;/label&gt;
        &lt;label class="dropnav-container"&gt;three&lt;/label&gt;
        &lt;label class="dropnav-container"&gt;three&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dropdown1"&gt;
      &lt;button id="btn_ws" onclick="toggleDropDown('div_ws')" class="dropbtn1"&gt;Sensors 
                  &lt;/button&gt;
      &lt;div class="dropdown-content1" id="div_ws"&gt;
        &lt;label class="dropnav-container"&gt;four&lt;/label&gt;
        &lt;label class="dropnav-container"&gt;four&lt;/label&gt;
        &lt;label class="dropnav-container"&gt;four&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="dropdown1"&gt;
      &lt;button id="btn_smu" onclick="toggleDropDown('div_smu')" class="dropbtn1"&gt;SMUs 
                  &lt;/button&gt;
      &lt;div class="dropdown-content1" id="div_smu"&gt;
        &lt;label class="dropnav-container"&gt;five&lt;/label&gt;
        &lt;label class="dropnav-container"&gt;five&lt;/label&gt;
        &lt;label class="dropnav-container"&gt;five&lt;/label&gt; &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;a href="javascript:void(0);" class="icon" onclick="myFunction()"&gt;&amp;#9776;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>