title: Javascript add/remove classes from X elements but 1
body: <p>so I have these flex panels where I add two classes when I click in one of them, but when I click in another I want to remove the classes from the other flexes and apply only on the current flex beeing clicked. The code above is what I came up so far. It works, but is there any other "clean/elegant" way of doing it ?</p>
  
  <pre><code>&lt;div class="panels"&gt;
      &lt;div class="panel panel1"&gt;
        &lt;p&gt;Hey&lt;/p&gt;
        &lt;p&gt;Let's&lt;/p&gt;
        &lt;p&gt;Dance&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="panel panel2"&gt;
        &lt;p&gt;Give&lt;/p&gt;
        &lt;p&gt;Take&lt;/p&gt;
        &lt;p&gt;Receive&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="panel panel3"&gt;
        &lt;p&gt;Experience&lt;/p&gt;
        &lt;p&gt;It&lt;/p&gt;
        &lt;p&gt;Today&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="panel panel4"&gt;
        &lt;p&gt;Give&lt;/p&gt;
        &lt;p&gt;All&lt;/p&gt;
        &lt;p&gt;You can&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="panel panel5"&gt;
        &lt;p&gt;Life&lt;/p&gt;
        &lt;p&gt;In&lt;/p&gt;
        &lt;p&gt;Motion&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Js snippet:</p>
  
  <pre><code>const panels = document.querySelectorAll('.panel');
  
  function toggleOpen(){
      panels.forEach(panel =&gt; panel.classList.remove('open','open-active'));
      this.classList.toggle('open');
      this.classList.toggle('open-active');
  }
  panels.forEach(panel =&gt; panel.addEventListener('click', toggleOpen)); 
  </code></pre>