Главная css <details> - скрыть/показать информацию

details - раскрывающийся список

(<details> - скрыть/показать информацию)

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

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

Элемент <details> генерирует простой виджет без JavaScript для отображения/скрытия содержимого элемента, при необходимости нажав на его дочерний элемент <summary> (англ. резюме), который используется в качестве метки для виджета раскрытия.

Виджет раскрытия <details> представлен на экране в виде небольшого треугольника, который поворачивается, чтобы показать состояние открытия/закрытия.

в HTML документе
<details>
<summary>Вопрос</summary>
  <p>Ответ</p>
</details>
Результат примера
Кто над нами вверх ногами? Муха
Колоб-колобок забрёл на потолок? Солнце
Женщины-космонавты России?
  1. Валентина Терешкова
  2. Светлана Савицкая
  3. Елена Кондакова
  4. Елена Серова
  5. Юлия Пересильд
  6. Анна Кикина