Сворачиваемый контент
Переключайте видимость контента в вашем проекте с помощью нескольких классов и наших плагинов JavaScript.
Как это работает
Плагин свертывания JavaScript используется для показа\скрытия контента. Кнопки или ссылки используются как триггеры, «нацеленные» на определенные элементы, которые надо скрыть\показать. Изменение состояния элемента происходит с помощью height
- изменением его с текущего до 0
. В связи с тем, как CSS обрабатывает анимации, мы не можете использовать padding
в элементе класса .collapse
. Вместо padding
используйте независимый «оборачивающий» элемент.
prefers-reduced-motion
. Смотрите раздел специальных возможностей в нашей документации по редукции анимации.
Пример
Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:
.collapse
скрывает содержимое.collapsing
применяется во время переходов.collapse.show
показывает содержимое
Как правило, мы рекомендуем использовать кнопку с атрибутом data-bs-target
. Хотя это не рекомендуется с семантической точки зрения, Вы также можете использовать ссылку с атрибутом href
(и role="button"
). В обоих случаях требуется data-bs-toggle="collapse"
.
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Ссылка с href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Кнопка с data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Некоторый заполнитель для компонента сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
</div>
</div>
Взаимодействие со множественными объектами
Кнопки и ссылки <button>
и <a>
могут показывать и прятать сразу несколько элементов, обращаясь к их атрибутам href
или data-bs-target
через селектор jQuery. Несколько <button>
или <a>
могут показывать или прятать один элемент, если каждый из них обращается к элементу через свои атрибуты href
или data-bs-target
.
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить первый элемент</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить второй элемент</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Некоторый заполнитель для первого компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Некоторое содержимое заполнителя для второго компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
</div>
</div>
</div>
</div>
Доступность
Добавьте aria-expanded
к «контролирующему» элементу. Этот атрибут явно передает текущее состояние скрываемого элемента, привязанного к «контролирующему» элементу, «экранным читалкам» и прочим вспомогательным технологиям. Если скрываемый элемент скрыт по умолчанию, его aria-expanded должен быть "false" aria-expanded="false"
. Если раньше вы определяли скрываемый элемент показываемым по умолчанию через класс show
, теперь используйте вместо этого класса aria-expanded="true"
в «контролирующем» элементе. Плагин автоматически переключит этот атрибут в элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также связанный с тем же складным элементом). Если элемент HTML элемента управления не является кнопкой (например, <a>
или <div>
), к элементу следует добавить атрибут role="button"
.
Если ваш элемент управления нацелен на один сворачиваемый элемент, то есть атрибут data-bs-target
указывает на селектор id
, то вы должны добавить к элементу управления атрибут aria-controls
, содержащий идентификатор сворачиваемого элемента. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому сворачиваемому элементу.
Заметим, что текущая версия Bootstrap не работает с различными событиями взаимодействия с клавиатурой, описанными в WAI-ARIA Authoring Practices 1.1 accordion pattern - и вам потребуется подключить эти события с помощью обычного JavaScript.
Sass
Переменные
$transition-collapse: height .35s ease;
Классы
Классы перехода сворачивания можно найти в scss/_transitions.scss
, поскольку они используются в нескольких компонентах (сворачивание и аккордеон).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Использование
Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:
.collapse
прячет содержимое.collapse.show
показывает содержимое.collapsing
добавляется, когда переход начинается и удаляется с его завершением
Эти классы можно найти в _transitions.scss
.
Через атрибуты
Просто добавьте к элементу data-bs-toggle="collapse"
и data-bs-target
, чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. Атрибут data-bs-target
принимает CSS-селектор, к которому применяется коллапс. Не забудьте добавить к складному элементу класс collapse
. Если Вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show
.
Чтобы добавить управление группами в виде аккордеона в сворачиваемую область, добавьте атрибут данных data-bs-parent="#selector"
. Обратитесь к демонстрации, чтобы увидеть это в действии.
Через JavaScript
Активируйте вручную:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Параметры
Параметры можно передавать через атрибуты или JavaScript. Чтобы сделать это через атрибуты, добавьте имя параметра к data-
, например data-parent=""
.
Наименование | Тип | По умолчанию | Описание |
---|---|---|---|
parent |
selector | jQuery object | DOM element | false |
Если указан родительский элемент, все складные элементы в указанном родительском элементе будут закрыты при отображении этого складного элемента. (аналогично традиционному поведению аккордеона - это зависит от класса card ). Атрибут должен быть установлен в целевой складной области. |
toggle |
boolean | true |
Переключает сворачиваемый элемент при вызове |
Методы
Асинхронные методы и переходы
Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.
Активирует ваш контент с использованием разворачиваемых панелей. Принимает необязательный object
параметров.
Вы можете создать экземпляр сворачивания с помощью конструктора, например:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Метод | Описание |
---|---|
toggle |
Переключает складной элемент на показанный или скрытый. Возврат к вызывающей стороне до того, как сворачиваемый элемент будет фактически показан или скрыт (то есть событие происходит до shown.bs.collapse или hidden.bs.collapse ). |
show |
Показывает разборный элемент. Возврат к вызывающей стороне до фактического отображения сворачиваемого элемента (например, до возникновения события shown.bs.collapse ). |
hide |
Скрывает разборный элемент. Возврат к вызывающей стороне до фактического скрытия сворачиваемого элемента (например, до возникновения события hidden.bs.collapse ). |
dispose |
Уничтожает сворачиваемый элемент. (Удаляет сохраненные данные в элементе DOM) |
getInstance |
Статический метод, позволяющий получить экземпляр коллапса, связанный с элементом DOM.. |
События
Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса.
Тип События | Описание |
---|---|
show.bs.collapse |
Это событие запускается немедленно при вызове метода экземпляра show .. |
shown.bs.collapse |
Это событие запускается, когда элемент сворачивания становится видимым для пользователя (будет ожидать завершения переходов CSS). |
hide.bs.collapse |
Это событие запускается сразу после вызова метода hide . |
hidden.bs.collapse |
Это событие запускается, когда элемент свертывания был скрыт от пользователя (будет ждать завершения переходов CSS). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// сделайте что-нибудь...
})