Подробности и резюме HTML5: интерактивные виджеты раскрытия информации

«Подробности и сводка HTML5» — это пара элементов HTML, которые используются для создания интерактивного виджета раскрытия информации. Элемент

используется в качестве контейнера для контента, который можно включать и отключать, а элемент

предоставляет заголовок для контента внутри

.

Вот несколько методов, которые можно использовать с элементами

и

:

  1. Базовое использование:

    <details>
 <summary>Click me</summary>
 <p>Hidden content</p>
</details>

  2. Открыть по умолчанию.
    Вы можете добавить атрибут openк элементу

    , если хотите, чтобы контент был видимым по умолчанию.

    <details open>
 <summary>Click me</summary>
 <p>Visible content</p>
</details>

  3. Вложенные элементы

    .
    Вы можете вкладывать элементы

    для создания нескольких уровней раскрытия информации.

    <details>
 <summary>Click me</summary>
 <p>Level 1 content</p>
 <details>
   <summary>Click me</summary>
   <p>Level 2 content</p>
 </details>
</details>

  4. Стилизация.
    Вы можете применить собственные стили к элементам

    и

    с помощью CSS, чтобы они соответствовали дизайну вашего веб-сайта.

  5. Манипулирование JavaScript.
    Вы можете использовать JavaScript для программного управления состоянием элемента

    , например его открытия или закрытия на основе взаимодействия с пользователем или других событий.