<details> и <summary> делают раскрывающийся блок ("аккордеон") совсем без JavaScript: summary - всегда видимый заголовок, клик по нему открывает или закрывает содержимое details. А атрибут name умеет объединять несколько таких блоков в группу, где открыт может быть только один - тоже без единой строки скрипта.
Заметь: у всех трёх details одинаковый атрибут name="faq" - открой второй или третий блок кликом по его summary, и первый закроется сам, без единой строчки скрипта. Это готовый аккордеон "из коробки".
Раскрывающийся блок: details и summary
<details> - контейнер, который браузер умеет сворачивать и разворачивать сам. <summary> - его первый дочерний элемент: единственная часть, которая видна всегда, и единственное место, по которому нужно кликнуть, чтобы переключить блок. Открытость управляется булевым атрибутом open - как и у любого булева атрибута, браузеру важно только его наличие, а не значение. Отсюда частая ошибка: open="false" НЕ закроет блок - атрибут всё равно присутствует, значит details остаётся открытым. Закрыть можно только полностью убрав атрибут (в разметке - просто не писать open, в JS - element.removeAttribute("open") или element.open = false). Если внутри details вообще нет тега summary, браузер сам подставляет подпись по умолчанию (в англоязычном интерфейсе это слово "Details") - лучше всегда писать свой summary, чем полагаться на подстановку. При переключении details посылает событие toggle, а несколько быстрых изменений подряд браузер схлопывает в одно событие, а не рассылает по одному на каждое.
<details><summary>Что такое HTML?</summary><p>Язык разметки.</p></details> - свой summary, понятная подпись.
<details open="false"><summary>Вопрос</summary>Ответ</details> - открыт, несмотря на "false": это булев атрибут, значение игнорируется.
Аккордеон без JS: атрибут name
Атрибут name объединяет несколько тегов <details> в одну "эксклюзивную" группу: открыт одновременно может быть только один блок с этим значением name, а открытие любого другого автоматически закрывает предыдущий - именно так и работает классический аккордеон FAQ. Элементы группы не обязаны идти в разметке подряд. Если в исходном коде сразу у нескольких details группы стоит атрибут open, браузер откроет только первый из них по порядку в коде, а остальные принудительно закроет при разборе страницы - так что помечать open стоит только один элемент группы. Это самая свежая возможность из всех, что встречались в курсе: она стабильно заработала в браузерах только в декабре 2023 года (Chrome 120, Safari 17.2), Firefox на момент проверки поддерживал её лишь в экспериментальной Nightly-сборке - то есть до этого настоящий HTML-аккордеон без JavaScript вообще нельзя было собрать.
<details name="faq" open>...</details><details name="faq">...</details> - одна группа, открыт только первый.
<details name="faq" open>...</details><details name="faq" open>...</details> - оба помечены open, но реально откроется только первый по порядку в коде.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Писать open="false", думая, что это закроет блок | open - булев атрибут, значение "false" игнорируется, блок остаётся открытым | Убирать атрибут open целиком (в JS - removeAttribute("open") или el.open = false) |
| Не писать summary вовсе | Браузер сам подставляет подпись по умолчанию, читателю непонятно, куда кликать | Всегда указывать свой summary с осмысленным текстом |
| Помечать открытым сразу несколько details с одинаковым name | Реально откроется только первый по порядку в коде, остальные закроются сами | Ставить open только у одного элемента группы |
| Писать свой JS для аккордеона, закрывая соседние details вручную | Дублирует то, что уже даёт атрибут name из коробки | Использовать name вместо самодельного скрипта |
| Вкладывать details друг в друга больше чем на 1-2 уровня | Читателю сложно понять, что где открывается | Ограничивать вложенность, при большой структуре использовать плоский список деталей |
Шпаргалка
| Тег/атрибут | Что нужно знать |
|---|---|
| <details> | Раскрывающийся контейнер, открытость - булев атрибут open |
| <summary> | Первый дочерний элемент, всегда виден, клик переключает open |
| Закрыть программно | removeAttribute("open") или el.open = false, НЕ open="false" |
| Событие toggle | Срабатывает после смены состояния, быстрые изменения схлопываются в одно |
| name="группа" | Аккордеон: одновременно открыт только один details с этим name (с декабря 2023) |
Коротко: отвечаем на вопросы
Почему open="false" не закрывает details?
open - булев атрибут: браузеру важно только его наличие в разметке, а не значение. Раз атрибут написан, блок считается открытым, даже если значение - "false". Чтобы закрыть блок, атрибут нужно убрать полностью, а не менять его значение.
Что покажет браузер, если внутри details нет тега summary?
Браузер подставит собственную подпись по умолчанию вместо явного заголовка. Такая подпись не объясняет читателю, что скрыто внутри, поэтому свой summary лучше писать всегда.
Как сделать аккордеон с одной открытой панелью без JavaScript?
Дать нескольким тегам details одинаковый атрибут name. Открытие любого из них автоматически закроет остальные с тем же name - это стабильно заработало в браузерах только в декабре 2023 года.
Что будет, если у двух details с одинаковым name в разметке оба стоят с атрибутом open?
Браузер откроет только первый из них по порядку в коде, а второй закроет сам при разборе страницы - открытым одновременно может быть только один элемент группы.
