Появление при клике блока и исчезновение других

Question

Изначально неправильно сформулировал вопрос. Есть такой код, при клике на кнопки исчезают и появляются блоки, привязанные к этим кнопкам. Но сейчас при открытии одного блока остальные не закрываются.

Как сделать на чистом JS так, чтобы при клике на кнопку появлялся блок и закрывались остальные 2, если они открыты?

<script>
function chpok(id){
    elem = document.getElementById(id); //находим блок div по его id, который передали в функцию
    state = elem.style.display; //смотрим, включен ли сейчас элемент
    if (state =='') elem.style.display='none'; //если включен, то выключаем
    else elem.style.display=''; //иначе - включаем
}
</script><script>
function chpokk(id){
    elem = document.getElementById(id); //находим блок div по его id, который передали в функцию
    state = elem.style.display; //смотрим, включен ли сейчас элемент
    if (state =='') elem.style.display='none'; //если включен, то выключаем
    else elem.style.display=''; //иначе - включаем
}
</script><script>
function chpokkk(id){
    elem = document.getElementById(id); //находим блок div по его id, который передали в функцию
    state = elem.style.display; //смотрим, включен ли сейчас элемент
    if (state =='') elem.style.display='none'; //если включен, то выключаем
    else elem.style.display=''; //иначе - включаем
}
</script>

<button class="hit" onclick="chpok('text1')">Хит продаж</button>
<article class="products-specials-block products-specials-discount cs-br-1" id="text1>
 аааааааааааааа
</article>
<button class="nov" onclick="chpokk('text2')">Новинки</button>
<article class="products-specials-block products-specials-discount cs-br-1" id="text2>
 аааааааааааааа
</article>
<button class="skidki" onclick="chpokkk('text3')">Скидки</button>
<article class="products-specials-block products-specials-discount cs-br-1" id="text3>
 аааааааааааааа
</article>

Answer 1

Это можно сделать проверяя тип кнопки на которую пришелся сам клик, после чего отключить отображение тех блоков, который не равны типу нажатой кнопки:

const divs = document.querySelectorAll("div")

const handleClick = event => {
  divs.forEach(div => {
    if (div.dataset.type !== event.target.dataset.type) {
      div.style.display = "none"
    } else {
      div.style.display = "block"
    }
  })
}

document.querySelectorAll("button").forEach(button => 
button.addEventListener("click", handleClick))

<button data-type="hit">Хит продаж</button>
<button data-type="new">Новинки</button>
<button data-type="sale">Скидки</button>

<div data-type="hit">Hit</div>
<div data-type="new">New</div>
<div data-type="sale">Sale</div>

БЛОГ НА HUSL

Появление при клике блока и исчезновение других

Ответы (1 шт):