Сворачиваемый контент

Заметим, что текущая версия Bootstrap не работает с различными событиями взаимодействия с клавиатурой, описанными в WAI-ARIA Authoring Practices 1.1 accordion pattern - и вам потребуется подключить эти события с помощью обычного JavaScript.

Sass

Переменные

$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;

Классы

Классы перехода сворачивания можно найти в scss/_transitions.scss, поскольку они используются в нескольких компонентах (сворачивание и аккордеон).

.collapse {
 &:not(.show) {
 display: none;
 }
}

.collapsing {
 height: 0;
 overflow: hidden;
 @include transition($transition-collapse);

 &.collapse-horizontal {
 width: 0;
 height: auto;
 @include transition($transition-collapse-width);
 }
}

Использование

Плагин «скрытия\показа» использует несколько классов для работы 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="".

Методы

Активирует ваш контент с использованием разворачиваемых панелей. Принимает необязательный object параметров.

Вы можете создать экземпляр сворачивания с помощью конструктора, например:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
 toggle: false
})

События

Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса.

var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
 // сделайте что-нибудь...
})