Сворачивание и аккордеон
Collapse (сворачивание) прячет блок и плавно раскрывает его по щелчку на кнопке. Так убирают подробности, которые нужны не всем: расширенные фильтры, примечания. Аккордеон — группа сворачиваемых блоков, где открыт только один; на лендинге из него делают раздел «Вопросы и ответы».
Сворачиваемый блок
Блок получает класс collapse и id. Кнопка ссылается на него атрибутами data-bs-toggle="collapse" и data-bs-target:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse"
data-bs-target="#filters" aria-expanded="false" aria-controls="filters">
Расширенные фильтры
</button>
<div class="collapse mt-2" id="filters">
<div class="card card-body">
Здесь фильтры по дате, исполнителю и тегам.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Сначала видна только кнопка. Щелчок плавно раскрывает карточку с текстом, повторный — сворачивает. Атрибут aria-expanded Bootstrap переключает сам, чтобы программа чтения с экрана знала состояние.
Класс show рядом с collapse делает блок открытым с самого начала. Одна кнопка может управлять сразу несколькими блоками: в data-bs-target пишут общий класс, например .details.
Аккордеон
Аккордеон собирается из готовых классов: обёртка accordion с id, пункты accordion-item, в каждом заголовок с кнопкой accordion-button и сворачиваемый блок accordion-collapse. Атрибут data-bs-parent связывает блоки: когда открывается один, остальные закрываются.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="accordion" id="faq">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1">
Есть ли бесплатный тариф?
</button>
</h2>
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faq">
<div class="accordion-body">Да, для команды до трёх человек — навсегда.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2">
Можно ли отменить подписку?
</button>
</h2>
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faq">
<div class="accordion-body">Да, в любой момент в настройках аккаунта.</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Первый ответ открыт, второй свёрнут. Откройте второй вопрос — первый закроется сам. Стрелка справа в заголовке поворачивается в зависимости от состояния.
Настройки аккордеона
| Что | Как |
|---|---|
| Открыт по умолчанию | show на блоке и без collapsed на кнопке |
| Можно открыть несколько | Убрать data-bs-parent у блоков |
| Без рамок и фона | accordion-flush на обёртке |
Частая ошибка
Оставить у свёрнутого пункта кнопку без класса collapsed. Внешний вид кнопки Bootstrap не вычисляет при загрузке: стрелка будет смотреть вверх, а заголовок выделен, как у открытого пункта. У каждой кнопки закрытого пункта должны быть collapsed и aria-expanded="false".