Как организовать аккордеон с использованием только HTML и CSS

Что проверяют

Знаете ли вы нативный <details> и понимаете ли, почему старые хаки с чекбоксами хуже него. Следом обычно просят сделать так, чтобы одновременно была открыта только одна секция, и добавить анимацию.

Как отвечать

Современный ответ: <details> и <summary>.

<details name="faq">
  <summary>Сроки доставки</summary>
  <p>От двух до пяти дней.</p>
</details>

Что это даёт без JavaScript:

• состояние: атрибут open появляется и исчезает сам, стилизуется через details[open];
• доступность: <summary> фокусируется с клавиатуры, открывается по Enter и пробелу, скринридер объявляет, раскрыт блок или свёрнут. Руками прописывать role и aria-expanded не нужно;
• эксклюзивный режим: одинаковый атрибут name у группы <details> делает из них аккордеон, где открытие одной секции закрывает остальные. Это уже поддерживают все основные браузеры;
• поиск по странице: в Chromium Ctrl+F находит текст в свёрнутой секции и раскрывает её.

Оформление: стандартный треугольник убирают через summary { list-style: none }, для Safari добавляют summary::-webkit-details-marker { display: none }, а свою стрелку рисуют псевдоэлементом и поворачивают по details[open]. Плавное раскрытие дают псевдоэлемент ::details-content и interpolate-size: allow-keywords, который разрешает анимировать высоту до auto. Поддержка у них пока неполная, поэтому анимацию добавляют как улучшение: без неё секция просто открывается мгновенно.

Старые варианты назовите и объясните, чем они хуже: скрытый <input type="checkbox"> с <label> и селектором :checked + .content, радиокнопки для режима «одна открытая секция». Работают, но скринридер видит чекбокс, а не раскрывающийся блок.

Где спотыкаются

Показывают содержимое по :hover. Это не аккордеон: на телефоне наведения нет, а с клавиатуры блок не открыть.

Вешают на заголовок aria-expanded="false" без скрипта. Атрибут никогда не поменяется, и скринридер всегда будет сообщать, что блок свёрнут.

Анимируют height от 0 до auto через transition. Без interpolate-size такой переход не работает, отсюда костыли с max-height: 1000px.