Задача: Показать / Скрыть html-блок по клику на кнопку. Реализовать на Javascript, который будет скрывать и показывать html-элемент по клику на кнопку или любой другой элемент страницы.
Решение 1. Код №1 к Примеру 1: Суть заключается в том, что мы получаем нужный элемент и меняем его свойсво .style.display
на значения none
или block
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
Необходимо указать один 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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> |
.hide-element
, который скрывает элемент и функция которая переключает этот класс с помощью метода .toggle()
.Также, с помощью метода
.contains()
проверяем есть ли сейчас класс hide-element
и меняем надпись на кнопке (Открыть/Закрыть) в значении кнопки value
.