Как сделать раскрывающийся блок на HTML details и summary
Details и summary создают раскрывающийся блок средствами HTML. Добавьте понятную подпись, поместите внутрь дополнительный текст и проверьте управление без мыши.
Что должно получиться
Человек видит короткую подпись и понимает, какие сведения скрыты. Он раскрывает блок, читает содержимое и при необходимости сворачивает его. Для базового переключения не требуется собственный обработчик нажатия: эту работу выполняет браузер.
Подход подходит для дополнительных пояснений, подробностей и небольших групп сведений. Не убирайте таким способом единственный путь к важному действию или условие, без которого человек неправильно поймёт страницу. Сначала решите, можно ли вообще скрывать эту информацию.
Из чего это складывается
| Часть | Задача | Проверка |
|---|---|---|
| details | Объединяет подпись и скрываемое содержимое | Есть закрывающий тег |
| summary | Называет содержимое и переключает состояние | Стоит первым элементом внутри details |
| Внутренний текст | Раскрывает подробности | Сохраняет понятную структуру |
| open | Задаёт открытое состояние | Для закрытия атрибут удалён |
| name | Объединяет блоки в группу с одним открытым элементом | Совместимость проверена в нужных браузерах |
| Оформление | Показывает действие и состояние | Виден фокус и признак раскрытия |
Подпись должна объяснять содержимое
Одинаковые подписи «Подробнее» у нескольких блоков заставляют открывать их по очереди. Назовите тему: состав комплекта, требования к файлу, подробности доставки. По одной строке должно быть понятно, стоит ли раскрывать этот блок сейчас.
В summary лучше оставить одно понятное действие. Не добавляйте внутрь отдельные ссылки и другие интерактивные элементы без серьёзной причины и проверки: человеку будет сложнее предсказать, приведёт нажатие к переходу или к раскрытию. Ссылки на связанные страницы можно поместить в само раскрываемое содержимое.
Как это сделать по шагам
- Отделите дополнительное пояснение от сведений, которые должны быть видны сразу. Если без текста нельзя принять решение, оставьте его открытым на странице.
- Создайте details и поместите summary первым элементом внутри. После подписи добавьте содержимое блока.
- Сначала проверьте обычный HTML без дополнительных сценариев. Раскрытие и сворачивание должны работать штатным способом.
- Выберите начальное состояние. Добавьте open, если подробности должны быть раскрыты при первом показе.
- При необходимости объедините несколько details общим значением name. Проверьте, что пользователю действительно нужно видеть только один блок группы.
- Добавьте оформление, сохранив заметный фокус, понятную подпись и признак текущего состояния.
- Проверьте управление с клавиатуры, длинные подписи, узкий экран и работу со вспомогательными технологиями в вашей целевой среде.
Небольшой пример разметки
Базовый блок: <details><summary>Какие файлы подготовить</summary><p>Соберите исходные изображения и описание задачи.</p></details>. Подпись находится внутри своего details, а пояснение следует за ней. Для такой конструкции отдельный сценарий переключения не нужен.
Чтобы тот же блок был открыт сразу, начало меняют на <details open>. Атрибут open логический: само его присутствие означает открытое состояние. Запись open='false' не закрывает блок. Для закрытого начального состояния атрибут убирают целиком.
Несколько блоков и общая группа
Одинаковое значение name связывает несколько details так, чтобы при открытии одного другой в этой группе закрывался. Например, блоки могут иметь name='product-info'. Не используйте общее имя для независимых наборов на разных частях страницы: их поведение неожиданно окажется связанным.
Проверьте поддержку именно группировки, а не только самого details. В целевой среде без нужного поведения несколько блоков могут оставаться открытыми одновременно. Если для задачи это допустимо, содержимое всё равно доступно. Если ограничение принципиально, предусмотрите и отдельно проверьте соответствующее решение.
Возможность держать несколько разделов открытыми бывает полезна при сравнении. Не вводите режим одного раскрытого блока только ради внешнего вида. Попробуйте реальную задачу читателя: сможет ли он сопоставить требования и условия, если один текст постоянно исчезает?
Частые ошибки
Повторно переключать состояние сценарием
Собственный обработчик нажатия может конфликтовать с нативным действием и создавать двойное переключение. Начинайте с поведения браузера. Если сценарию нужно узнать о смене состояния, используйте событие toggle и проверяйте текущее свойство open.
Событие toggle приходит после изменения состояния. Несколько быстрых изменений могут объединяться в одно событие. Поэтому для текущего вида ориентируйтесь на состояние элемента, а не на количество полученных событий.
Удалять все признаки интерактивности
После удаления стандартного маркера подпись может выглядеть обычным текстом. Если меняете оформление, сохраните другой понятный признак раскрытия и проверьте его в открытом и закрытом состоянии. Видимый фокус нужен независимо от выбранного значка.
Считать компонент готовой плавной анимацией
Базовый details даёт раскрытие, но не обещает нужный вам эффект движения. Дополнительную анимацию проверяют отдельно, вместе с конечной высотой, фокусом и настройкой уменьшения движения. Сначала добейтесь рабочего поведения без украшений.
Как проверить
- По подписи понятно, какая информация появится внутри.
- Фокус попадает на элемент раскрытия и остаётся заметным.
- Блок открывается и закрывается с клавиатуры без дополнительного сценария.
- Длинная подпись переносится, а текст не обрезается на телефоне.
- Ссылки и действия внутри открытого содержимого доступны.
- Общее имя группы не связывает независимые части страницы.
- Начальное состояние соответствует присутствию или отсутствию open.
Перед выпуском проверьте доступность с клавиатуры, структуру HTML и уменьшение движения. Задачу по реализации можно разместить в разделе «Разработка».
Вопросы и ответы
Обязателен ли JavaScript для раскрытия?
Для базового поведения details и summary он не нужен. Сначала проверьте нативную конструкцию, а сценарии добавляйте только для отдельной дополнительной задачи.
Почему open='false' не закрывает блок?
Это логический атрибут. Пока он присутствует, блок считается открытым. Уберите атрибут, чтобы задать закрытое состояние.
Где должен находиться summary?
Первым элементом внутри своего details. После него размещают содержимое, которое нужно раскрывать.
Нужно ли всем блокам одинаковое name?
Только если они образуют одну группу с одним открытым элементом. Для независимых наборов используйте разные имена или не задавайте группировку.
Почему собственный сценарий мешает раскрытию?
Он может повторять или отменять действие браузера. Уберите лишнее переключение в тестовой копии и проверьте нативное поведение.
Можно ли спрятать внутри обязательное условие?
Если без него человек неверно поймёт предложение или действие, лучше показать условие сразу. Раскрытие подходит для дополнительных подробностей.