Как реализовать появление и исчезновение блока при нажатии на кнопку (на чистом JS)?

Question

[Taron4uk]

Добрый день!
Подскажите, пожалуйста, как реализовать появление и исчезновение блока при нажатии на кнопку (на чистом JS)?

Блок изначально "display:none;"
Подключен скрипт

function viewDiv(){ 
document.getElementById("filters").style.display = "block"; 
};

Подключил к кнопке атрибут onmousedown="viewDiv()", но он только открывает блок, а чтобы закрыть - не закрывает.

Подскажите, как также добавить возможность скрытия заново в display: none?
Заранее огромное спасибо! (только учусь JS)

Comments

[Andrew]

Понимаю, что вы хотите чисто js
Но повариативнее будет

.d-none{
display: none;
}

const btn = document.querySelector('.enabler'),
el = querySelector('.element');
btn.addEventListener('click',()=>el.classList.toggle('d-none'));

Так вы сможете потом вешать анимацию и прочее на класс, а не засорять стилевыми свойствами JS.

Answer 1

[yavaskript]

сделайте проверку - если у блока в данный момент display: none, то меняйте на display: block. И наоборот - если у блока в данный момент прописано display: block, то меняйте на none

if (document.getElementById("filters").style.display == 'block') { 
  document.getElementById("filters").style.display = "none";
}
else {
 document.getElementById("filters").style.display = "block";
}