Как создать доступный аккордеон в 2025 году?

Как создать доступный аккордеон в 2025 году?

В HTML есть встроенный тег <details>, который автоматически управляет состоянием открытия и закрытия. Нам не нужно добавлять ARIA-атрибуты, так как он изначально доступен

Мы можем создать аккордеон так:

<details> <summary>Вопрос?</summary> <div>Ответ</div> </details>

По умолчанию содержимое скрыто. Чтобы отобразить его сразу при загрузке страницы, добавьте атрибут open

Мы можем изменить иконку треугольника на что-то другое, используя псевдоэлемент ::marker:

summary::marker {

content: "👉";

}

details[open] summary::marker {

content: "👇";

}

Мы также можем запускать CSS-анимации при добавлении атрибута open

Однако пока нельзя анимировать height: auto с помощью CSS, так как это не поддерживается всеми основными браузерами.

Но можно использовать Web Animation API и анимировать высоту через JavaScript. На CSS Tricks есть отличный туториал на эту тему

➡️ @FrontendPortal | #HTML