Как сделать блок с частыми вопросами на HTML и CSS без JS

  • 7 июня 2026

Как сверстать

Евгений Шкляр

Тег <details> уже давно позволяет делать раскрывающиеся блоки без единой строки JavaScript. Но у него была одна проблема: несколько таких блоков работали независимо — открытие одного никак не влияло на другие. Аккордеон, в котором открыт только один раздел, приходилось делать через JS. В 2024 году это изменилось: у <details> появился атрибут name.

Если дать нескольким элементам <details> одинаковый атрибут name, браузер объединит их в группу. Когда открывается один элемент — остальные из группы автоматически закрываются. Это поведение точно как у радиокнопок с одинаковым name.

<details name="faq">
  <summary>Вопрос первый</summary>
  <p>Ответ на первый вопрос.</p>
</details>

<details name="faq">
  <summary>Вопрос второй</summary>
  <p>Ответ на второй вопрос.</p>
</details>

<details name="faq">
  <summary>Вопрос третий</summary>
  <p>Ответ на третий вопрос.</p>
</details>

Это и есть эксклюзивный аккордеон. Ноль JavaScript, ноль дополнительных библиотек.

Попробуйте сами

Что такое HTML?
HTML — язык разметки гипертекста. Он описывает структуру веб-страницы с помощью тегов. Браузер читает HTML и превращает его в визуальный документ.
Что такое CSS?
CSS — каскадные таблицы стилей. Они описывают внешний вид HTML-элементов: цвета, шрифты, отступы, расположение на экране.
Что такое JavaScript?
JavaScript — язык программирования для браузера. Он делает страницы интерактивными: реагирует на действия пользователя, изменяет DOM, обращается к серверу.
Зачем нужен атрибут name у details?
Атрибут name объединяет несколько блоков details в группу. При открытии одного остальные закрываются автоматически — это эксклюзивный аккордеон без JavaScript.

По умолчанию <summary> показывает стандартный маркер-треугольник. Его можно убрать и заменить чем угодно. Для Chromium-браузеров используется summary::-webkit-details-marker { display: none }, для остальных — list-style: none на самом summary.

Переходы пока работают ограниченно: анимировать раскрытие через CSS-переходы height не получится без дополнительных трюков, потому что hidden — это не CSS-свойство, а HTML-атрибут. Но уже сейчас иконку поворота через transform и transition сделать легко.

Если нужно более тонкое поведение — например, плавная анимация высоты — можно добавить JS поверх нативного аккордеона. Нативное поведение не мешает, а служит базовым слоем. Это хороший пример прогрессивного улучшения.

Атрибут name у <details> поддерживается в Chrome 120+, Firefox 130+ и Safari 17.2+. Поддержка достаточно широкая для использования в продакшене, но проверьте аудиторию проекта.

Если браузер не поддерживает name — блоки будут просто работать как независимые <details> без эксклюзивности. Это корректная деградация: функциональность сохраняется.

Атрибут name у <details> объединяет несколько блоков в группу-аккордеон: открытие одного закрывает остальные. Это полностью нативное поведение браузера без единой строки JavaScript.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники