Toggle class and remove from other elements using a filter

Question

I'd like to toggle between classes on a page with two sections : when you click the first one, it toggle a class called open and removes it from the other section that eventually had it.

I've managed to make things work with the toggle, but the other section has not the class open removed. So I started experimenting with the .filter but I can't manage to understand it...

The behaviour: only one div should be red at the same time

document.addEventListener("DOMContentLoaded", function(e) {
const sections = document.getElementsByTagName("section");

Array.from(sections).forEach(function(section) {
    section.addEventListener('click', function(el) {
        //console.log(sections, el)
        //var diff = sections.filter(element => element !== section)
        //console.log(diff)
        section.classList.toggle("open")
    });
  });
  
});

body{
    margin: 0;

}

main{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;   
}

section{
    transition: all 300ms ease-in-out;
    padding-top: 2em;
    flex-grow: 2;
    flex-basis: 0;
    display: flex;
flex-direction: column;
}

section:nth-child(1){
    background-color: lightblue;
}

section:nth-child(2){
    background: rgb(137, 110, 148);
}

section.open{
    background: red;

}

img{
    width: 90%;
    align-self: center;
}

GrafiCode · Answer

You were on the right track with filter() you just forgot to convert sections to Array first.

document.addEventListener("DOMContentLoaded", function(e) {
const sections = document.getElementsByTagName("section");

Array.from(sections).forEach(function(section) {
    section.addEventListener('click', function(el) {
        //console.log(sections, el)
        var diff = Array.from(sections).filter(element => element !== section)
        diff.forEach(function(otherEl) {
          otherEl.classList.remove("open")
        })
        section.classList.toggle("open")
    });
  });
  
});

body{
    margin: 0;

}

main{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;   
}

section{
    transition: all 300ms ease-in-out;
    padding-top: 2em;
    flex-grow: 2;
    flex-basis: 0;
    display: flex;
flex-direction: column;
}

section:nth-child(1){
    background-color: lightblue;
}

section:nth-child(2){
    background: rgb(137, 110, 148);
}

section.open{
    background: red;

}

img{
    width: 90%;
    align-self: center;
}

userkfM5 · Answer

Instead of using toggle consider using add and remove on the class list instead. No need for filter.

// Cache the sections
const sections = document.querySelectorAll('section');

// Add listeners to them
sections.forEach(section => {
  section.addEventListener('click', handleClick);
});

// Remove the open classes from all the sections first
// and then add one to the section that was clicked
function handleClick() {
  sections.forEach(section => section.classList.remove('open'));
  this.classList.add('open');
}

main,section{display:flex}body{margin:0}main{width:100%;justify-content:center;flex-direction:row}section{transition:.3s ease-in-out;padding-top:2em;flex-grow:2;flex-basis:0;flex-direction:column}section:first-child{background-color:#add8e6}section:nth-child(2){background:#896e94}section.open{background:red}img{width:90%;align-self:center}

Toggle class and remove from other elements using a filter

2 Answers