Сворачивание

Как это работает

JavaScript плагин сворачивания используется для показа и скрытия содержимого. Кнопки или ссылки используются как триггеры, которые сопоставляются с конкретными элементами, которые вы переключаете. Сворачивание элемента будет анимировать height от его текущего значения до 0. Учитывая, как CSS обрабатывает анимации, вы не можете использовать padding на элементе .collapse. Вместо этого используйте класс как независимый обертывающий элемент.

Пример

Нажмите кнопки ниже, чтобы показать и скрыть другой элемент через изменения классов:

• .collapse скрывает содержимое
• .collapsing применяется во время переходов
• .collapse.show показывает содержимое

Как правило, мы рекомендуем использовать <button> с атрибутом data-bs-target. Хотя это не рекомендуется с семантической точки зрения, вы также можете использовать ссылку <a> с атрибутом href (и role="button"). В обоих случаях требуется data-bs-toggle="collapse".

<p class="d-inline-flex gap-1">
  <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-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Некоторое содержимое заполнителя для компонента сворачивания. Эта панель скрыта по умолчанию, но раскрывается, когда пользователь активирует соответствующий триггер.
  </div>
</div>

Горизонтальное

Плагин сворачивания поддерживает горизонтальное сворачивание. Добавьте модификатор класса .collapse-horizontal для перехода width вместо height и установите width на дочерний элемент. Не стесняйтесь писать свой собственный пользовательский Sass, использовать встроенные стили или использовать наши утилиты ширины.

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Переключить горизонтальное сворачивание
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      Это некоторое содержимое заполнителя для горизонтального сворачивания. Оно скрыто по умолчанию и показывается при срабатывании.
    </div>
  </div>
</div>

Множественные переключатели и цели

Элемент <button> или <a> может показывать и скрывать несколько элементов, ссылаясь на них с помощью селектора в его атрибуте data-bs-target или href. И наоборот, несколько элементов <button> или <a> могут показывать и скрывать один и тот же элемент, если каждый из них ссылается на него своим атрибутом data-bs-target или href.

<p class="d-inline-flex gap-1">
  <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". Если вы установили сворачиваемый элемент открытым по умолчанию, используя класс show, установите aria-expanded="true" на управлении вместо этого. Плагин автоматически переключит этот атрибут на управлении в зависимости от того, был ли сворачиваемый элемент открыт или закрыт (через JavaScript, или потому что пользователь активировал другой элемент управления, также связанный с тем же сворачиваемым элементом). Если HTML элемент элемента управления не является кнопкой (например, <a> или <div>), атрибут role="button" должен быть добавлен к элементу.

Если ваш элемент управления нацелен на один сворачиваемый элемент – т.е. атрибут data-bs-target указывает на селектор id – вы должны добавить атрибут aria-controls к элементу управления, содержащий id сворачиваемого элемента. Современные программы чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут для предоставления пользователям дополнительных ярлыков для прямой навигации к самому сворачиваемому элементу.

Обратите внимание, что текущая реализация Bootstrap не охватывает различные необязательные взаимодействия с клавиатурой, описанные в Руководстве по созданию ARIA, паттерн аккордеона - вам нужно будет включить их самостоятельно с помощью пользовательского JavaScript.

CSS

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);
  }
}

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

Плагин сворачивания использует несколько классов для обработки тяжелой работы:

• .collapse скрывает содержимое
• .collapse.show показывает содержимое
• .collapsing добавляется, когда начинается переход, и удаляется, когда он заканчивается

Эти классы можно найти в _transitions.scss.

Через data атрибуты

Просто добавьте data-bs-toggle="collapse" и data-bs-target к элементу для автоматического назначения управления одним или несколькими сворачиваемыми элементами. Атрибут data-bs-target принимает CSS селектор для применения сворачивания. Обязательно добавьте класс collapse к сворачиваемому элементу. Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show.

Для добавления управления группой в стиле аккордеона к сворачиваемой области добавьте data атрибут data-bs-parent="#selector". См. страницу аккордеона для получения дополнительной информации.

Через JavaScript

Включите вручную с помощью:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Опции

Поскольку опции могут передаваться через атрибуты данных или JavaScript, вы можете добавить имя опции к data-bs-, например, data-bs-animation="{value}". Обязательно изменяйте стиль написания имени опции с “camelCase” на “kebab-case” при передаче опций через атрибуты данных. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный зарезервированный атрибут данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", окончательное значение title будет 456, а отдельные атрибуты данных переопределяют значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Окончательный объект конфигурации — это объединенный результат data-bs-config, data-bs- и js object, где последний заданный ключ-значение переопределяет другие.

Методы

Активирует ваше содержимое как сворачиваемый элемент. Принимает необязательный объект опций.

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

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

События

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // сделать что-то...
})