Аккордеон из HTML-элементов details и summary

Вы можете использовать их для создания интерактивных компонентов разворачивания и сворачивания совсем без JavaScript. Они работают во всех современных браузерах. В маргинальных браузерах, например IE, содержимое отображается полностью, поэтому пользователь всегда может получить доступ к контенту.

<details>
  <summary>Кликайте сюда</summary>
  <p>Добрый день...</p>
</details>

Кликайте сюда

Добрый день…

Ещё их можно немного стилизовать с помощью CSS, например, изменить расположение и внешний вид стрелки.

У раскрытого элемента details есть атрибут open который можно использовать для применения CSS или подмены текста в summary в разных состояниях конструкции. Этот атрибут можно использовать для раскрытого начального состояния.

<details open>
  <summary>Кликайте чтобы скрыть</summary>
  <p>По умолчанию это раскрыто...</p>
</details>

Кликайте чтобы раскрыть

По умолчанию это раскрыто…

Сборка аккордеона из HTML-элементов details и summary

Комбинацию HTML-элементов details и summary можно использовать для интерактивного компонента “accordion”.

<details>
  <summary>Посмотреть ещё</summary>
  <p>Привет!</p>
</details>

<details>
  <summary class="html">Посмотреть ещё</summary>
  <p>Привет!</p>
</details>

Посмотреть ещё

Привет!

Посмотреть ещё

Привет!

Часто в компоненте “accordion” допускается раскрытие только одного элемента со скрытием остальных. HTML-элементы details и summary так делать не умеют.

Они возвращают событие toggle при переключении и этим можно воспользоваться, добавив совсем немного javascript, так:

See this code details-summary-accordion on x.xhtml.ru.

How to build a progressively enhanced accordion component with vanilla JS.