Справочник HTML & CSS

<details>, <summary>

Раскрывающийся блок без JavaScript: `<summary>` — видимый заголовок, остальное скрыто до клика.

Синтаксис

<details>
  <summary>Title</summary>
  Hidden content
</details>

Атрибуты

Параметр	Тип	Описание
open	—	Необязательный. Блок раскрыт изначально.
name	text	Необязательный. Блоки с одним `name` образуют аккордеон: открыт только один.

Примеры

Вопрос и ответ:

<details>
  <summary>Do you have oat milk?</summary>
  <p>Yes, and soy and almond milk too.</p>
</details>

Аккордеон — открыт только один блок:

<details name="faq" open>
  <summary>Opening hours</summary>
  <p>Daily from 8 am to 9 pm.</p>
</details>
<details name="faq">
  <summary>Delivery</summary>
  <p>Free for orders over $20.</p>
</details>

Свой значок вместо треугольника:

<style>
  summary { list-style: none; cursor: pointer; }
  summary::before { content: "+ "; }
  details[open] summary::before { content: "− "; }
</style>
 
<details>
  <summary>Ingredients</summary>
  <p>Espresso, milk, cinnamon.</p>
</details>

Примечания

<summary> должен быть первым элементом внутри <details>. Атрибут name для аккордеона поддерживается всеми современными браузерами с 2024 года. Скрытый текст находит поиск по странице (Ctrl + F) и раскрывает блок.

См. также

<dialog> — Диалоговое окно; модальное открывается методом `showModal()` и блокирует остальную страницу.
popover — Превращает элемент во всплывающий слой поверх страницы — без JavaScript.

Вопросы и ответы по теме

В учебнике

Раскрывающиеся блоки и диалоги — Тег details и summary, аккордеон, модальное окно dialog, закрытие через form method=dialog и всплывающие блоки popover.

Спасибо, что читаете!