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;
}<main>
<section class="left" id="swup" >
<img src="https://picsum.photos/200/300" alt="">
</section>
<section class="right" id="swup" >
<img src="https://picsum.photos/200/400" alt="">
</section>
</main>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}<main>
<section class="left" id="swup">
<img src="https://picsum.photos/200/300" alt="">
</section>
<section class="right" id="swup">
<img src="https://picsum.photos/200/400" alt="">
</section>
</main>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;
}<main>
<section class="left" id="swup" >
<img src="https://picsum.photos/200/300" alt="">
</section>
<section class="right" id="swup" >
<img src="https://picsum.photos/200/400" alt="">
</section>
</main>