Как скрыть и показать элемент по клику на кнопку на JS

Задача: Показать / Скрыть html-блок по клику на кнопку. Реализовать на Javascript, который будет скрывать и показывать html-элемент по клику на кнопку или любой другой элемент страницы.

Пример 1

Решение 1. Код №1 к Примеру 1: Суть заключается в том, что мы получаем нужный элемент и меняем его свойсво .style.display на значения none или block.



<input id="click-to-hide" type="button" value="Нажими меня!">
<div id="hidden-element">Этот элемент будет скрываться и появляться.</div>

<script>
  document.addEventListener("DOMContentLoaded", hiddenCloseclick());
  document.getElementById('click-to-hide').addEventListener("click", hiddenCloseclick);
	function hiddenCloseclick() {
	let x = document.getElementById('hidden-element');
      if (x.style.display == "none"){
	  x.style.display = "block";
	  } else {
	 x.style.display = "none"}
    };
	
  </script>

<div id="hidden-element">Этот элемент будет скрываться и появляться.</div>

document.addEventListener("DOMContentLoaded", hiddenCloseclick());

document.getElementById('click-to-hide').addEventListener("click", hiddenCloseclick);

function hiddenCloseclick() {

let x = document.getElementById('hidden-element');

if (x.style.display == "none"){

x.style.display = "block";

} else {

x.style.display = "none"}

};

</script>

Код №1: Javascript код для скрытия элемента по клику на кнопку

Необходимо указать один id элементу по которому нужно кликать чтобы вызвать событие, а второй id нужно присвоить элементу, который будет скрываться/появляться. И здесь соответственно:

hidden-element – id элемента, который скрывается;
click-to-hide – id элемента, который кликают.
DOMContentLoaded — событие загрузки HTML страницы. Чтобы получить элемент id="hidden-element" сразу при загрузке. Это событие сразу запускает функцию, которая скрвает наш элемент, т.к. изначально элемент не скрыт. Можно в скрываемом элементе сразу прописать скрытие <div id="hidden-element" style="display:none;">, тогда из скрипта событие DOMContentLoaded нужно убрать. Но не всегда есть возможность изменить HTML.

Решение 2. Код №2 к Примеру 2: Здесь у нас в стилях уже есть некий класс который содержит значение display: none. Задача — выбрать нужный элемент и добавлять или удалять ему этот класс при клике на кнопку. + здесь еще добавлена смена текста в кнопке, в зависимости от состояния, это можно применить и в Код №1.

Пример 2



<input id="click-to-hide-2" type="button" value="Open">

<div class="wpcraft-box-2 hide-element">
	/* Скрываемое содержимое */
</div>

<style>
	.hide-element {display: none !important;}
</style>
	
<script>
	/* Вешаем обработчик клика на кнопку */
	var clickToHide2 = document.querySelector('#click-to-hide-2');
	clickToHide2.addEventListener("click", hideVisibleElem);
		
	/* Функция добавления / удаления класса, который скрывает элемент */
	function hideVisibleElem() {
	let wpcraftBox2 = document.querySelector('.wpcraft-box-2');
	wpcraftBox2.classList.toggle("hide-element");
		
	/* В зависимости от наличия скрывающего класса меняем текст в кнопке */
	if (wpcraftBox2.classList.contains("hide-element")){
		clickToHide2.value = 'Open';
	} else {
		clickToHide2.value = 'Close';
	}
}
</script>

/* Скрываемое содержимое */

</div>

<style>

.hide-element {display: none !important;}

</style>

/* Вешаем обработчик клика на кнопку */

var clickToHide2 = document.querySelector('#click-to-hide-2');

clickToHide2.addEventListener("click", hideVisibleElem);

/* Функция добавления / удаления класса, который скрывает элемент */

function hideVisibleElem() {

let wpcraftBox2 = document.querySelector('.wpcraft-box-2');

wpcraftBox2.classList.toggle("hide-element");

/* В зависимости от наличия скрывающего класса меняем текст в кнопке */

if (wpcraftBox2.classList.contains("hide-element")){

clickToHide2.value = 'Open';

} else {

clickToHide2.value = 'Close';

}

</script>

Код 2: Скрипт Javascript скрытия элемента по клику на кнопку

В решении Кода №2 у нас есть класс .hide-element, который скрывает элемент и функция которая переключает этот класс с помощью метода .toggle().
Также, с помощью метода .contains() проверяем есть ли сейчас класс hide-element и меняем надпись на кнопке (Открыть/Закрыть) в значении кнопки value.