- Home »
Как создавать сворачиваемые секции с помощью CSS
В этой статье разберёмся, как создавать сворачиваемые секции (collapsible sections) только с помощью CSS — без костылей на JS, без лишних зависимостей и головной боли. Почему это важно? Потому что иногда хочется сделать интерфейс удобнее, не тащить лишний JavaScript, не плодить баги и не усложнять поддержку. Особенно если речь идёт о документации, админках, вики, настройках серверов или даже о простых HTML-дашбордах. Всё, что нужно — это немного CSS-магии и пара строк разметки. Расскажу, как это работает, как быстро внедрить, приведу примеры, кейсы, сравню с другими подходами, а ещё покажу, как это может пригодиться в автоматизации и скриптах. Погнали!
Как это работает?
Сворачиваемые секции — это такие элементы интерфейса, которые можно раскрывать и скрывать по клику. Обычно для этого используют JavaScript, но современные браузеры позволяют реализовать это только на CSS, используя элементы <details> и <summary>, а также некоторые трюки с чекбоксами и псевдоклассами.
- <details> и <summary>: Семантический и кроссбраузерный способ. Работает из коробки, поддерживается всеми современными браузерами.
- Чекбоксы + CSS: Более гибкий способ, если нужно кастомизировать внешний вид или поведение.
- CSS-анимации и переходы: Можно добавить плавность, чтобы всё выглядело аккуратно.
Всё это позволяет делать интерфейс интерактивнее, не жертвуя производительностью и безопасностью. Особенно актуально, если вы настраиваете веб-интерфейсы для серверов, пишете документацию или делаете внутренние панели управления.
Как быстро и просто всё настроить?
Давайте разберём оба подхода — от самого простого к чуть более продвинутому.
1. Семантический способ: <details> и <summary>
Это самый быстрый и надёжный вариант. Просто вставляете в HTML:
<details>
<summary>Настройки сервера</summary>
<p>Здесь можно указать параметры запуска, выбрать порты, задать переменные окружения и т.д.</p>
</details>
Выглядит просто, работает сразу. Можно стилизовать через CSS:
details {
margin-bottom: 1em;
border: 1px solid #ccc;
border-radius: 4px;
padding: .5em;
background: #f9f9f9;
}
summary {
font-weight: bold;
cursor: pointer;
outline: none;
}
details[open] {
background: #e0f7fa;
}
Плюсы:
- Работает без JS
- Семантика (доступность, SEO, поддержка скринридеров)
- Простота внедрения
Минусы:
- Ограниченная кастомизация summary (но можно обойти, если нужно)
- Не все старые браузеры поддерживают (но это уже неактуально для большинства задач)
2. Кастомный способ: чекбокс + CSS
Если хочется больше контроля над внешним видом или поведением, можно использовать чекбокс и псевдоклассы:
<input type="checkbox" id="toggle1" hidden>
<label for="toggle1">Показать логи</label>
<div class="collapsible">
<pre>[2024-06-01 12:00] Server started...</pre>
</div>
.collapsible {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
input[type="checkbox"]:checked + label + .collapsible {
max-height: 500px; /* или auto, но с auto transition не работает */
}
label {
cursor: pointer;
font-weight: bold;
color: #00796b;
}
Плюсы:
- Полная кастомизация
- Можно делать вложенные секции, анимации, иконки и т.д.
Минусы:
- Чуть больше разметки
- Нужно следить за уникальностью id
- Не такая семантика, как у <details>
Примеры, схемы, практические советы
Давайте сравним оба подхода на практике. Вот таблица:
| Метод | Плюсы | Минусы | Когда использовать |
|---|---|---|---|
| <details> + <summary> |
|
|
Документация, настройки, где важна доступность |
| Чекбокс + CSS |
|
|
Кастомные UI, панели управления, дашборды |
Положительный кейс
Внутренняя вики для команды DevOps: используем <details> для разделов “Как поднять VPN”, “Бэкапы”, “Мониторинг”. Всё читаемо, быстро, не надо тянуть JS. Доступно даже с мобильника.
Отрицательный кейс
Пытались сделать кастомные секции с чекбоксами для сложной формы настроек, но забыли про уникальные id — всё ломалось, секции раскрывались не те. Решение: генерировать id динамически или использовать <details> там, где не нужна суперкастомизация.
Команды и сниппеты
Если вы работаете с генерацией HTML (например, через pandoc, mkdocs, hugo), можно вставлять такие секции прямо в markdown:
::: details "Показать конфиг nginx"
server {
listen 80;
server_name example.com;
...
}
:::
Для ручной вставки — просто копируйте шаблон:
<details>
<summary>Показать конфиг nginx</summary>
<pre>server {
listen 80;
server_name example.com;
...
}</pre>
</details>
Если хочется автоматизировать вставку секций в документацию, можно использовать утилиты типа pandoc или mkdocs с поддержкой markdown-экстеншенов.
Похожие решения, программы и утилиты
- markdown-it — поддерживает расширения для collapsible секций.
- Docusaurus — генератор документации с поддержкой collapsible секций.
- Typora — редактор markdown с поддержкой
<details>.
Статистика и сравнение с другими решениями
Сравним подходы по производительности и удобству:
| Решение | Время загрузки | Зависимости | Доступность | Гибкость |
|---|---|---|---|---|
| CSS-only (<details>) | Мгновенно | Нет | Высокая | Средняя |
| CSS-only (чекбокс) | Мгновенно | Нет | Средняя | Высокая |
| JS-фреймворки (React/Vue) | Дольше | Да | Зависит от реализации | Максимальная |
Интересный факт: GitHub поддерживает <details> прямо в markdown-issue и pull request, так что можно скрывать логи, конфиги, большие блоки текста.
Нестандартные способы использования
- Скрывать большие логи или дампы в отчётах CI/CD прямо в HTML-отчётах.
- Делать FAQ или справку по серверу, где каждый вопрос — это
<details>. - Встраивать collapsible секции в email-отчёты (работает не везде, но в некоторых почтовиках — да).
- Использовать для скрытия/раскрытия блоков с чувствительной информацией (пароли, ключи) в приватной документации.
Какие новые возможности открываются и чем это поможет в автоматизации и скриптах?
- Можно генерировать документацию с collapsible секциями автоматически из скриптов (например, парсить логи и оборачивать их в
<details>). - Внутри админ-панелей можно делать компактные интерфейсы без JS, что ускоряет загрузку и снижает риски XSS.
- В скриптах для CI/CD можно формировать HTML-отчёты с секциями для каждого шага билда или деплоя.
- Внутри внутренних вики или knowledge base можно структурировать большие объёмы информации, не перегружая страницу.
Вывод — заключение и рекомендации
Сворачиваемые секции на CSS — это быстрый, надёжный и безопасный способ сделать интерфейс удобнее, не жертвуя производительностью и поддерживаемостью. Если вам нужно быстро добавить collapsible-блоки в документацию, настройки, дашборды или админки — используйте <details> и <summary>. Если хочется больше кастома — чекбоксы и CSS вам в помощь. Не тащите лишний JS, если можно обойтись без него, особенно в проектах, где важна безопасность и скорость.
Рекомендую:
- Для документации и справки —
<details> - Для кастомных UI — чекбоксы + CSS
- Для автоматизации — генерируйте такие секции прямо из скриптов
Если вы ищете быстрый и надёжный хостинг для своих проектов — заказывайте VPS или выделенный сервер прямо на этом блоге. Всё для того, чтобы ваши проекты работали стабильно и быстро!
Официальные ресурсы для изучения:
Пробуйте, внедряйте, делитесь опытом — и пусть ваши интерфейсы будут не только функциональными, но и удобными!
В этой статье собрана информация и материалы из различных интернет-источников. Мы признаем и ценим работу всех оригинальных авторов, издателей и веб-сайтов. Несмотря на то, что были приложены все усилия для надлежащего указания исходного материала, любая непреднамеренная оплошность или упущение не являются нарушением авторских прав. Все упомянутые товарные знаки, логотипы и изображения являются собственностью соответствующих владельцев. Если вы считаете, что какой-либо контент, использованный в этой статье, нарушает ваши авторские права, немедленно свяжитесь с нами для рассмотрения и принятия оперативных мер.
Данная статья предназначена исключительно для ознакомительных и образовательных целей и не ущемляет права правообладателей. Если какой-либо материал, защищенный авторским правом, был использован без должного упоминания или с нарушением законов об авторском праве, это непреднамеренно, и мы исправим это незамедлительно после уведомления. Обратите внимание, что переиздание, распространение или воспроизведение части или всего содержимого в любой форме запрещено без письменного разрешения автора и владельца веб-сайта. Для получения разрешений или дополнительных запросов, пожалуйста, свяжитесь с нами.
More stories
