<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));
    });
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.