Javascript从X元素中添加/删除类，但1

Question

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 ?

<div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>

Js snippet:

const panels = document.querySelectorAll('.panel');

function toggleOpen(){
    panels.forEach(panel => panel.classList.remove('open','open-active'));
    this.classList.toggle('open');
    this.classList.toggle('open-active');
}
panels.forEach(panel => panel.addEventListener('click', toggleOpen)); 

Answer 1

You could listen to bubbled click events on the parent element. With the use of the closest method (FF & Chrome), code can be simplified to this:

const panels = document.querySelector('.panels');

panels.addEventListener('click', function(e) {
    const panel = panels.querySelector('.open');
    if (panel) panel.classList.remove('open', 'open-active');
    e.target.closest('.panel').classList.add('open', 'open-active');
}); 

Or, with a closure that remembers the currently selected panel:

(function (panels, panel) {
    panels.addEventListener('click', function(e) {
        if (panel) panel.classList.remove('open', 'open-active');
        (panel = e.target.closest('.panel')).classList.add('open', 'open-active');
    });
})(document.querySelector('.panels'));

Answer 2

Despite you not having provided your HTML, I believe I understand what you're trying to do. I'll give it a shot with jQuery.

With jQuery:

let $all = $('.open', '.open-active');
$(".panel").click(function(event) {
    $all.each(function(index, e2) {
        if (!$(event.target).is(e2)) {
            $(e2).removeClass('open', 'open-active');
        }
    });
});