title: Close Dropdown when other Dropdown is toggled active
body: <p>i am trying to close let´s say Dropdown A automatically, when Dropdown B gets <code>classList.toggle(&quot;active)</code> (in this case i toggle the ClassList with a Click)</p>
  <p>I can open (<code>classList.toggle(&quot;active)</code>) and close (<code>classList.toggle(&quot;inactive)</code>) it manually, but i want to close it automatically.</p>
  <p>Right now i got this:</p>
  <pre><code>function dropdown() {
  
      let employerBranding = document.querySelector(&quot;.employer-branding&quot;);
      let marketing = document.querySelector(&quot;.marketing&quot;);
      let corporateOverall = document.querySelector(&quot;.corporate-overall&quot;);
      let technicalData = document.querySelector(&quot;.technical-data&quot;);
  
      let categoryModules = [employerBranding, marketing, corporateOverall, technicalData];
      let categoryDropdown = $(&quot;.category-dropdown&quot;);
  
  
      for (let i = 0; i &lt; categoryModules.length; i++) {
  
          categoryModules[i].addEventListener(&quot;click&quot;, function () {
              categoryDropdown.slideDown();
          });
  
      }
  
  }
  
  dropdown();
  </code></pre>
  <p>The Problem is now: when i click on one of the 4 Modules of course it opens all of the Dropdowns.
  How can i trigger the correct Dropdown to the correct Module, so only one (the one below the clicked Module) opens up
  &amp;&amp;
  How can i add with another <code>click</code> a <code>.slideUp()</code> to slide it up again?</p>