Accordion (details/summary)

Теги <details> та <summary> дають повністю робочий акордеон нативно — з клавіатурною доступністю без жодного JavaScript.

Код

<details>
  <summary>Що входить у тариф?</summary>
  <p>Необмежена кількість інструментів форматування та безкоштовна підтримка.</p>
</details>
<details>
  <summary>Чи потрібна реєстрація?</summary>
  <p>Ні, усі інструменти доступні без акаунту.</p>
</details>

Попередній перегляд

Пояснення

summary — завжди видимий заголовок; вміст details розкривається/згортається по кліку. Браузер сам додає трикутник-індикатор та керує станом open/closed.

Атрибут open на details розкриває його одразу при завантаженні сторінки.
Кілька details з однаковим атрибутом name (у сучасних браузерах) поводяться як группа — розкривається лише один одразу.

Схожі інструменти

Simple modal (без JS)

Модальне вікно, що відкривається й закривається чистим CSS через псевдоклас :target.

Visually hidden accessible text

CSS-клас для тексту, який чують скринридери, але не бачать зрячі користувачі.