Блок вопросов и ответов без JavaScript
Используем details и summary для дополнительных пояснений с нативным клавиатурным управлением.
Задача и ограничения
Для небольшого FAQ достаточно встроенного раскрывающегося элемента. Он не требует отдельного скрипта для базового переключения. Это удобно для справочника, где дополнительное пояснение должно оставаться частью серверного HTML.
Пошаговое решение
Каждый вопрос сделайте summary внутри details. Ответ разместите после него. Формулируйте вопрос так, чтобы он был понятен в свёрнутом состоянии. Важную обязательную информацию не прячьте только ради компактного дизайна.
Оформите рамки и отступы, но сохраните заметный индикатор раскрытия. Не помещайте дополнительные кнопки внутрь summary без необходимости: сочетание нескольких интерактивных действий может быть неудобным. Здесь вопросы открываются независимо, что позволяет сравнивать ответы.
Код компонента
<style>
details { border: 1px solid #c5dbce; border-radius: 8px; margin: 10px 0; padding: 14px; }
summary { cursor: pointer; font-weight: 650; }
details p { margin: 12px 0 0; }
</style>
<details><summary>Нужен ли сервер для локального HTML?</summary><p>Для простого файла достаточно браузера. Публикация требует размещения в интернете.</p></details>
<details><summary>Можно ли писать CSS в HTML?</summary><p>Да, через style. Общие стили многостраничного сайта удобнее хранить отдельно.</p></details>Что может пойти не так
Как проверить результат
- Откройте оба ответа мышью.
- Повторите переключение с клавиатуры.
- Проверьте длинный ответ и масштабирование текста.
Разберите также: details, видимый фокус.