🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <details> используется для отображения скрытой информации. Его можно использовать для создания страницы FAQ, руководства пользователя или любых других блоков, где дополнительный контент должен быть скрыт до тех пор, пока его не запросит пользователь.

Атрибут open — указывает, должен ли блок быть раскрытым.

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

Базовый пример:

<details>
  <summary>Нажмите здесь, чтобы показать или скрыть подробности</summary>
  <p>Подробности о чём-то</p>
</details>

Несколько раскрывающихся блоков:

<details>
  <summary>Первый вопрос</summary>
  <p>Ответ</p>
</details>
<details>
  <summary>Второй вопрос</summary>
  <p>Ответ</p>
</details>

Вложенные раскрывающиеся блоки:

<details>
  <summary>Первый блок — нажмите здесь, чтобы показать или скрыть подробности</summary>
  <p>Какие-то подробности</p>
  <details>
    <summary>Второй блок — нажмите здесь, чтобы показать или скрыть детали</summary>
    <p>Подробности о чем-то ещё</p>
  </детали
</details>

Для чего использовать тег <details>

  • Показать или скрыть дополнительную информацию.
  • Создать страницу FAQ с раскрывающимися разделами.
  • Добавить руководство пользователя с раскрываемыми разделами.
  • Реализовать меню со сворачиваемыми подменю.
  • Создать список с раскрываемыми элементами.
  • Сделать форму со сворачиваемыми разделами.
  • Реализовать фильтр со сворачиваемыми параметрами.

Нюансы

Если тег <summary> не используется внутри элемента <details>, содержимое <details> отображается постоянно, а виджет не создаётся.