<section class="flex-sec">
<button>BTN</button>
<div class="b1">1</div>
<div class="b1">2</div>
<div class="b1">3</div>
<div class="b1">4</div>
<div class="b1">5</div></section>
section{
display: flex;
button{
width: 50px;
height: 50px;
border: solid 4px black;
background: yellow;
}
}
.b1{
width: 200px;
height: 200px;
background: #00ff0b;
margin: 10px;
}
.b1._tog-sw{
background: #fc0;
}
View Compiled
const even = [document.querySelectorAll(".flex-sec > div:nth-child(even)")];
const odd = [document.querySelectorAll(".flex-sec > div:nth-child(odd)")];
const className = '_tog-sw';
let counter = 0;
document.querySelector(".flex-sec > button")
.addEventListener('click', () => {
counter++;
[odd, even].forEach((arr, i) => {
arr.forEach((el) => el.classList[i === (counter & 1) ? 'add' : 'remove'](className));
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.