Главная » Программирование » Как скрыть и показать элемент по клику на кнопку на JS

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

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

Пример 1

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

Код №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
Код 2: Скрипт Javascript скрытия элемента по клику на кнопку
В решении Кода №2 у нас есть класс .hide-element, который скрывает элемент и функция которая переключает этот класс с помощью метода .toggle().
Также, с помощью метода .contains() проверяем есть ли сейчас класс hide-element и меняем надпись на кнопке (Открыть/Закрыть) в значении кнопки value.
4.3 4 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии