Тег <details>: раскрывающиеся блоки
Как сделать дополнительную информацию доступной по нажатию без собственного скрипта.
Зачем нужен этот элемент
details создаёт раскрывающийся блок. Его видимое название находится в summary, а остальное содержимое показывается после активации. Базовое взаимодействие с клавиатурой уже реализовано браузером.
Этот элемент подходит для дополнительного пояснения или подробностей, которые не нужны всем сразу. Важные условия и основной ответ лучше не прятать без необходимости. Атрибут open оставляет блок раскрытым при первоначальной загрузке.
Синтаксис и пример
<details>
<summary>Нужен ли сервер для первого HTML-файла?</summary>
<p>Для простого статического примера достаточно открыть файл в браузере. Для публикации понадобится размещение в интернете.</p>
</details>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| summary | Понятный заголовок раскрывающегося блока. |
| open | Наличие атрибута означает открытое состояние. |
| Содержимое | Абзацы, списки и другие допустимые блоки. |
Частая ошибка
Не используйте open=»false», чтобы закрыть блок. Это логический атрибут: само его наличие уже открывает details.
Небольшая практика
Добавьте второй блок и откройте его атрибутом open. Проверьте переключение с клавиатуры Enter или пробелом.
Разберите также <p>, <button>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.