title: Dropdowns to Collapse when clicking outside
body: <p>I am a newbie in coding and I wonder if it's possible to create multiple dropdown menus, and whenever you click outside an opened box, I want it to be collapsed. I am sharing the code I wrote but it's not working since one dropdown is collapsing when clicking outside, but the other one isn't. Can you help me with that? I'm sharing the code and I want 3 dropdown menus. I'm struggling with this for weeks now and I haven't succeeded yet. Thanks in advance!</p>
  
  <pre><code>    HTML Code
  
      &lt;div class="container"&gt;
        &lt;a href="#home"&gt;&lt;span class="Agencymenu"&gt;Home&lt;/span&gt;&lt;/a&gt;
        &lt;a href="#news"&gt;&lt;span class="Agencymenu"&gt;News&lt;/span&gt;&lt;/a&gt;
        &lt;div class="dropdown"&gt;
          &lt;button class="dropbtn" onclick="myFunction()"&gt;Team 1&lt;/button&gt;
          &lt;div class="dropdown-content" id="myDropdown"&gt;
            &lt;a href="#"&gt;&lt;span class="Agencymenu"&gt;Link 1&lt;/span&gt;&lt;/a&gt;
            &lt;a href="#"&gt;&lt;span class="Agencymenu"&gt;Link 2&lt;/span&gt;&lt;/a&gt;
            &lt;a href="#"&gt;&lt;span class="Agencymenu"&gt;Link 3&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt; 
        &lt;div class="dropdown2"&gt;
          &lt;button class="dropbtn2" onclick="myFunction2()"&gt;Team 2&lt;/button&gt;
          &lt;div class="dropdown-content2" id="myDropdown2"&gt;
            &lt;a href="#"&gt;&lt;span class="Agencymenu"&gt;Link 1&lt;/span&gt;&lt;/a&gt;
            &lt;a href="#"&gt;&lt;span class="Agencymenu"&gt;Link 2&lt;/span&gt;&lt;/a&gt;
            &lt;a href="#"&gt;&lt;span class="Agencymenu"&gt;Link 3&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt; 
      &lt;/div&gt;
  
  CSS Code
  
          .Agencymenu {
          font-family: 'AGENCYB' !important;
          font-weight: bold;
          font-size: 24pt;
          color: #FFFFFF;
      }
  
      .container {
          overflow: hidden;
          background-color: #30333c;
          font-family: Arial;
      }
  
      .container a {
          float: left;
          font-size: 16px;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
      }
  
      .dropdown {
          float: left;
          overflow: hidden;
      }
  
      .dropdown .dropbtn {
          cursor: pointer;
          font-size: 16px;    
          border: none;
          outline: none;
          color: white;
          padding: 14px 16px;
          background-color: inherit;
          font-family:AGENCYB;
          font-size:30px;
      }
  
      .container a:hover, .dropdown:hover .dropbtn {
          background-color: #0C0;
      }
  
      .dropdown-content {
          display: none;
          position: absolute;
          background-color: #30333c;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
      }
  
      .dropdown-content a {
          float: none;
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
          text-align: left;
      }
  
      .dropdown-content a:hover {
          background-color: #ddd;
      }
  
      .show {
          display: block;
      }
  
      .container2 {
          overflow: hidden;
          background-color: #30333c;
          font-family: Arial;
      }
  
      .container2 a {
          float: left;
          font-size: 16px;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
      }
  
      .dropdown2 {
          float: left;
          overflow: hidden;
      }
  
      .dropdown2 .dropbtn2 {
          cursor: pointer;
          font-size: 16px;    
          border: none;
          outline: none;
          color: white;
          padding: 14px 16px;
          background-color: inherit;
          font-family:AGENCYB;
          font-size:30px;
      }
  
      .container2 a:hover, .dropdown2:hover .dropbtn2 {
          background-color: #0C0;
      }
  
      .dropdown-content2 {
          display: none;
          position: absolute;
          background-color: #30333c;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
      }
  
      .dropdown-content2 a {
          float: none;
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
          text-align: left;
      }
  
      .dropdown-content2 a:hover {
          background-color: #0C0;
      }
  
      .show2 {
          display: block;
      }
  
  JS Code:  
  
  /* When the user clicks on the button, 
  toggle between hiding and showing the dropdown content */
  function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show2");
  }
  
  // Close the dropdown if the user clicks outside of it
  window.onclick = function(e) {
    if (!e.target.matches('.dropbtn')) {
      var myDropdown = document.getElementById("myDropdown");
        if (myDropdown.classList.contains('show2')) {
          myDropdown.classList.remove('show2');
        }
    }
  }
  
  /* When the user clicks on the button, 
  toggle between hiding and showing the dropdown content */
  function myFunction2() {
      document.getElementById("myDropdown2").classList.toggle("show2");
  }
  
  // Close the dropdown if the user clicks outside of it
  window.onclick = function(e) {
    if (!e.target.matches('.dropbtn2')) {
      var myDropdown2 = document.getElementById("myDropdown2");
        if (myDropdown2.classList.contains('show2')) {
          myDropdown2.classList.remove('show2');
        }
    }
  }
  </code></pre>