Показ/скрытие блоков, простые интерактивные элементы

1. Как скрыть элемент: display: none и другие трюки

Веб-страница — не газета, где всё написано раз и навсегда. Часто мы хотим что-то спрятать (например, форму, спойлер, выпадающее меню) и показать это только по желанию пользователя. Примеры из жизни:

• Кнопка "Показать еще" для длинного списка товаров.
• Всплывающее окно с подсказкой или предупреждением.
• Меню, которое появляется при клике на "бургер" в мобильной версии.
• Сообщение об ошибке, которое видно только если что-то пошло не так.
• Аккордеоны — блоки, которые разворачиваются и сворачиваются.

Сегодня мы научимся делать такие штуки сами, без магии и сторонних библиотек.

Основные способы

Есть несколько способов скрыть элемент на странице с помощью CSS и JavaScript. Самый популярный — менять стиль display:

<div id="secretMessage">Секретное сообщение!</div>

const secret = document.getElementById('secretMessage');
secret.style.display = 'none'; // Скрыли элемент
secret.style.display = 'block'; // Показали обратно

Когда у элемента display: none, он полностью исчезает со страницы — как будто его и не было. Никаких "невидимых" мест — соседние блоки занимают его место.

Альтернатива: можно менять свойство visibility:

secret.style.visibility = 'hidden'; // Элемент невидим, но место занимает
secret.style.visibility = 'visible'; // Опять видим

Но чаще всего используется именно display: none — это стандарт для "выключения" блока.

2. Практика: Кнопка "Показать/Скрыть"

Давайте добавим в наше учебное приложение кнопку, которая будет показывать и скрывать форму добавления новой задачи.

Шаг 1. HTML-разметка

<button id="toggleFormBtn">Показать форму</button>
<form id="addTaskForm" style="display: none;">
  <input type="text" id="newTaskInput" placeholder="Новая задача">
  <button type="submit">Добавить</button>
</form>

Шаг 2. JavaScript: переключение видимости

const toggleBtn = document.getElementById('toggleFormBtn');
const form = document.getElementById('addTaskForm');

toggleBtn.addEventListener('click', function() {
  // Проверяем текущее состояние
  if (form.style.display === 'none' || form.style.display === '') {
    form.style.display = 'block';
    toggleBtn.textContent = 'Скрыть форму';
  } else {
    form.style.display = 'none';
    toggleBtn.textContent = 'Показать форму';
  }
});

Что происходит?
— При нажатии на кнопку мы смотрим: если форма скрыта (display: none или пусто), то показываем её и меняем текст кнопки.
— Если форма уже видна, скрываем обратно и возвращаем текст кнопки.

Совет: всегда синхронизируйте текст кнопки с состоянием формы — иначе пользователь запутается.

3. Классическая техника: переключение класса

Менять style.display напрямую удобно, но если вы хотите анимировать появление/скрытие, лучше использовать классы CSS. Например:

.hide {
  display: none;
}

form.classList.toggle('hide');

Или чуть сложнее — для плавного появления с помощью opacity и transition:

.fade {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.fade.show {
  opacity: 1;
  pointer-events: auto;
}

form.classList.toggle('show');

Плюс такого подхода: вы можете управлять всей анимацией через CSS, а JS просто добавляет/убирает класс.

4. Пример: Спойлер (раскрывающийся блок)

Давайте сделаем что-то более "живое" — спойлер, который раскрывается и сворачивается по клику.

HTML

<div class="spoiler">
  <button class="spoiler-btn">Показать секрет</button>
  <div class="spoiler-content hide">
    Тут спрятан секретный текст!
  </div>
</div>

CSS

.hide {
  display: none;
}

JavaScript

const spoilerBtn = document.querySelector('.spoiler-btn');
const spoilerContent = document.querySelector('.spoiler-content');

spoilerBtn.addEventListener('click', function() {
  spoilerContent.classList.toggle('hide');
  // Меняем текст кнопки в зависимости от состояния
  if (spoilerContent.classList.contains('hide')) {
    spoilerBtn.textContent = 'Показать секрет';
  } else {
    spoilerBtn.textContent = 'Скрыть секрет';
  }
});

Результат:
— При первом клике секрет появляется, кнопка меняет текст.
— При повторном клике секрет исчезает, кнопка возвращает прежний текст.

5. Интерактивные элементы: выпадающее меню, модальные окна

Выпадающее меню

HTML:

<div class="dropdown">
  <button class="dropdown-btn">Меню</button>
  <ul class="dropdown-list hide">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
  </ul>
</div>

JS:

const dropdownBtn = document.querySelector('.dropdown-btn');
const dropdownList = document.querySelector('.dropdown-list');

dropdownBtn.addEventListener('click', function() {
  dropdownList.classList.toggle('hide');
});

Модальное окно (простая реализация)

HTML:

<button id="openModalBtn">Открыть окно</button>
<div id="modal" class="modal hide">
  <div class="modal-content">
    <span id="closeModalBtn" class="close-btn">&times;</span>
    <p>Привет! Это модальное окно.</p>
  </div>
</div>

CSS (очень базово):

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
}
.hide {
  display: none;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 6px;
  min-width: 200px;
}
.close-btn {
  cursor: pointer;
  float: right;
  font-size: 24px;
}

JS:

const openModalBtn = document.getElementById('openModalBtn');
const modal = document.getElementById('modal');
const closeModalBtn = document.getElementById('closeModalBtn');

openModalBtn.addEventListener('click', () => {
  modal.classList.remove('hide');
});

closeModalBtn.addEventListener('click', () => {
  modal.classList.add('hide');
});

// Чтобы закрывать окно по клику вне контента
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.add('hide');
  }
});

6. Интеграция в наше учебное приложение (todo-list)

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

HTML

<button id="toggleTasksBtn">Скрыть список задач</button>
<ul id="tasksList">
  <!-- тут задачи -->
</ul>

JS

const toggleTasksBtn = document.getElementById('toggleTasksBtn');
const tasksList = document.getElementById('tasksList');

toggleTasksBtn.addEventListener('click', () => {
  if (tasksList.style.display === 'none' || tasksList.style.display === '') {
    tasksList.style.display = 'block';
    toggleTasksBtn.textContent = 'Скрыть список задач';
  } else {
    tasksList.style.display = 'none';
    toggleTasksBtn.textContent = 'Показать список задач';
  }
});

Теперь пользователь сам решает — видеть ему список дел или нет. Это особенно удобно на мобильных устройствах.

7. Типичные ошибки при показе/скрытии блоков

Ошибка №1: Неинициализированное значение display
Если элемент изначально не имеет явно заданного style.display, то element.style.display вернет пустую строку. Поэтому проверяйте оба варианта:

if (element.style.display === 'none' || element.style.display === '') { ... }

Ошибка №2: Перезапись встроенных стилей
Если на элементе уже есть стиль display: flex или display: inline-block, а вы бездумно пишете element.style.display = 'block', внешний вид может "сломаться". Лучше использовать классы, где заранее прописано нужное значение display.

Ошибка №3: Манипуляции с невидимыми элементами
Если элемент скрыт через display: none, попытки получить его размеры или, например, прокрутить к нему страницу не сработают — он "не существует" для браузера.

Ошибка №4: Несогласованность текста кнопки и состояния блока
Пользователь может запутаться, если кнопка говорит "Скрыть", а блок уже и так скрыт. Всегда синхронизируйте текст и состояние!

Ошибка №5: Неочевидные классы
Если у вас много разных классов для показа/скрытия, легко запутаться. Держите стили для скрытия в одном месте (.hide { display: none; }), не плодите лишних вариантов.