Знакомьтесь, <details>

Я хочу рассказать о замечательно элементе <details> и показать несколько примеров его использования, от простых до безумных.

Вам знаком паттерн верстки компонента, который может менять своё состояние с видимого на скрытый:

.component {   display:none; }  .component.open {   display:block; }

toggleButton.onclick = () => component.classList.toggle('open')

А теперь забудьте. Существует элемент, который может делать это из коробки. Знакомьтесь — <details>

HTML-элемент <details> используется для раскрытия скрытой (дополнительной) информации.

Базовое применение

Прежде всего давайте посмотрим как этот элемент работает:

Обратите внимание, что пример работает без каких либо дополнительных стилей или JavaScript. Вся функциональность встроена в сам браузер.

По умолчанию видимый текст зависит от настроек языка вашей системы, но его можно изменить добавив в <details> элемент <summary>:

Чтобы изменить состояние элемента в html вам достаточно добавить атрибут open

<!-- Содержимое по-умолчанию видимо --> <details open> ... </details>  <!-- Содержимое по-умолчанию скрыто --> <details> ... </details>

А чтобы управлять состоянием средствами JavaScript предусмотрен специальный API:

const details = document.querySelector('details')  details.open = true  // Отобразить содержимое details.open = false // Скрыть содержимое

Пара слов о доступности

Элемент <summary> фокусируемый. То есть передвигаясь по странице с клавиатуры вы попадёте на этот элемент. А вот содержимое может попасть в фокус только если <details> открыт, то есть фокус никогда не попадет на невидимые элементы внутри <details>.

Как правило, программы чтения с экрана хорошо справляются со стандартным использованием <details> и <summary>. Существуют некоторые вариации в объявлении в зависимости от программы и браузера. Подробнее.

Примеры использования

Далее я примерно повторю некоторые компоненты из документации bootstrap, но практически без JavaScript.

Изменяем маркер

Первое что вам может понадобится — изменить внешний вид маркера. Делается это очень просто:

summary::-webkit-details-marker {   /* Любые стили */ }

Или вы можете скрыть стандартный маркер и реализовать собственный

/* Убираем стандартный маркер */ details summary::-webkit-details-marker {   display: none }  /* Добавляем собственный маркер для закрытого состояния */ details summary:before {   content: '\f0fe';   font-family: "Font Awesome 5 free";   margin-right: 7px; }  /* Добавляем собственный маркер для открытого состояния */ details[open] summary:before {   content: '\f146'; } 

Collapse Component

Здесь всё просто. Базовый функционал такой же. Нужно лишь немного изменить внешний вид:

Accordion Component

Повторим предыдущий пример, немного изменим внешний вид <summary> и получим аккордеон:

Но, как видите, один элемент не закрывается когда открывается другой. Чтобы добиться этого нам понадобиться пара строк JavaScript. Необходимо отслеживать появление атрибута open на одном из элементов <details> и удалять его у остальных:

Popover Component

Эта реализация очень похожа на Collapse Component, с той разницей что содержимое <details> имеет абсолютное позиционирование и перекрывает контент.

Dropdown Component

В своей основе это тот же Popover Component. Отличается лишь внешний вид.

Тот же пример, только с отдельной кнопкой

Но у Dropdown Component есть ещё одно важное отличие: по клику за его пределами он должен скрываться. Чтобы реализовать это снова понадобится написать пару строк JavaScript.

// По клику на тело документа document.body.onclick = () => {   // Найти все открытые <details>   document.body.querySelectorAll('details.dropdown[open]')     // И закрыть каждый из них     .forEach(e => e.open = false) }

Modal Component

И напоследок пример модального окна.

Вообще <details> не лучший выбор для реализации этого компонента. Существует куда более подходящий элемент — <dialog>, но у него весьма плохая поддержка браузерами.

Ссылки

Can I Use Details & Summary elements
MDN details element
W3C details element