Скрытие одного элемента при появлении другого?

Question

[Алексей Орлов]

Практикуюсь в JS. Как сделать чтобы при нажатии на кнопку не было появления сразу двух item, т.е. необходимо, чтобы один скрывался и появлялся другой?
Codepen

Answer 1

[VegasChickiChicki]

const button = document.querySelectorAll('.button')
const item = document.querySelectorAll('.item')

function buttonClick() {
    button.forEach((el, index) => {
      el.addEventListener('click', () => {
          button.forEach(elem => {
            elem.classList.toggle('yellow');
            elem.classList.toggle('red');
          });
          item.forEach((elem, id) => {
            elem.style.display = index === id ? 'block' : 'none';
          })
        });
    })
}

buttonClick();

Самое просто решение.