Как показать и скрыть блок по кнопке на JavaScript?

Задан 17 месяцев назад610 просмотров2 ответа

Хочу кнопку «Показать/скрыть» для блока с текстом. Слышал, что можно через style.display, но не пойму, как переключать туда-обратно. Можно простой пример?

Игорь Михайлов 🐣 Птенец

спросил 17 месяцев назад

2 ответа

✓ Принятый ответ — помог автору

Самый прямой способ — менять style.display: 'none' прячет элемент, 'block' (или '') показывает.

<button id="toggle">Показать/скрыть</button>
<div id="box">Секретный текст</div>

const box = document.getElementById('box');
document.getElementById('toggle').onclick = function() {
  if (box.style.display === 'none') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
};

Это проверяет текущее состояние и переключает на противоположное.

Сергей Волков 🐣 Птенец

17 месяцев назад

Чище и короче — завести в CSS класс .hidden { display: none; } и переключать его:

box.classList.toggle('hidden');

toggle сам добавляет класс, если его нет, и убирает, если есть. Один вызов вместо if/else. Так обычно и делают на реальных сайтах.

Яна Герасимова 🥚 Яйцо

16 месяцев назад

Ваш ответ

Войдите, чтобы ответить на вопрос.