Перейти к основному содержанию Перейти к навигации по документации

Сворачиваемое содержимое

Переключайте видимость контента в Вашем проекте с помощью нескольких классов и наших плагинов JavaScript.

Как это устроено

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

Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion. См. раздел с уменьшенным движением в нашей документации по специальным возможностям.

Пример

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

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

Как правило, мы рекомендуем использовать кнопку с атрибутом data-bs-target. Хотя это не рекомендуется с семантической точки зрения, Вы также можете использовать ссылку с атрибутом hrefrole="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>

По горизонтали

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

Обратите внимание, что хотя в приведенном ниже примере для избежания чрезмерного перерисовки в наших документах установлено значение min-height, это явно не требуется. Требуется только ширина width дочернего элемента.

Это некий заполнитель для горизонтального сворачивания. По умолчанию он скрыт и отображается при срабатывании.
<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> могут отображать и скрывать несколько элементов, ссылаясь на них с помощью селектора в его атрибуте href или data-bs-target. Несколько <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". Если Вы установили открываемый складной элемент по умолчанию с помощью класса show, вместо этого установите aria-expanded="true" для элемента управления. Плагин автоматически переключит этот атрибут в элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также связанный с тем же складным элементом). Если элемент HTML элемента управления не является кнопкой (например, <a> или <div>), атрибут role="button" должен быть добавлен к элементу.

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

Обратите внимание, что текущая реализация Bootstrap не охватывает различные необязательные взаимодействия с клавиатурой, описанные в аккордеонном шаблоне WAI-ARIA Authoring Practices 1.1 - Вам нужно будет включить их самостоятельно в собственный 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);
  }
}

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

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

  • .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 = Array.prototype.slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Параметры

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs-, как в data-bs-parent="".

Наименование Тип По умолчанию Описание
parent selector | jQuery object | DOM element false Если указан родительский элемент, все складные элементы в указанном родительском элементе будут закрыты при отображении этого складного элемента. (аналогично традиционному поведению аккордеона - это зависит от класса card). Атрибут должен быть установлен в целевой складной области.
toggle boolean true Переключает сворачиваемый элемент при вызове

Методы

Асинхронные методы и переходы

Все методы API асинхронны и запускают переход. Они возвращаются к вызывающей стороне, как только переход начинается, но до его завершения. Кроме того, вызов метода переходного компонента будет проигнорирован.

Дополнительную информацию см. в нашей документации по JavaScript.

Активирует Ваш контент как складной элемент. Принимает необязательные параметры 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.Collapse.getInstance(element)
getOrCreateInstance Статический метод, который возвращает экземпляр коллапса, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать это так: bootstrap.Collapse.getOrCreateInstance(element)

События

Класс коллапса 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 () {
  // сделайте что-нибудь...
})