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

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

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

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

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

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

Пример

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

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

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

Некоторый заполнитель для компонента сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
html
<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 дочернего элемента.

Это некий заполнитель для горизонтального сворачивания. По умолчанию он скрыт и отображается при срабатывании.
html
<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 через селектор jQuery. Несколько <button> или <a> могут показывать или прятать один элемент, если каждый из них обращается к элементу через свои атрибуты href или data-bs-target.

Некоторый заполнитель для первого компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
Некоторое содержимое заполнителя для второго компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
html
<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;
$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

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

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

Параметры

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

Начиная с Bootstrap 5.2.1, все компоненты поддерживают экспериментальный зарезервированный атрибут данных 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}'.

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

Методы

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

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

Смотрите документацию по JavaScript.

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

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

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})
Метод Описание
dispose Уничтожает сворачиваемый элемент. (Удаляет сохраненные данные в элементе DOM)
getInstance Статический метод, который позволяет вам получить экземпляр сворачивания, связанный с элементом DOM, вы можете использовать его следующим образом: bootstrap.Collapse.getInstance(element)
getOrCreateInstance Статический метод, который возвращает экземпляр сворачивания, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать его следующим образом: bootstrap.Collapse.getOrCreateInstance(element)
hide Скрывает сворачиваемый элемент. Возвращается к вызывающей стороне до того, как сворачиваемый элемент будет фактически скрыт (например, до того, как произойдет событие hidden.bs.collapse).
show Показывает сворачиваемый элемент. Возвращается к вызывающей стороне до того, как сворачиваемый элемент действительно будет показан (например, до того, как произойдет событие shown.bs.collapse).
toggle Отображает или скрывает сворачиваемый элемент. Возврат к вызывающей стороне до того, как сворачиваемый элемент будет фактически показан или скрыт (т. е. до того, как произойдет событие shown.bs.collapse или hidden.bs.collapse).

События

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

Тип события Описание
hide.bs.collapse Это событие запускается сразу после вызова метода hide.
hidden.bs.collapse Это событие запускается, когда элемент сворачивания был скрыт от пользователя (будет ожидать завершения переходов CSS).
show.bs.collapse Это событие срабатывает сразу же, когда вызывается метод экземпляра show.
shown.bs.collapse Это событие запускается, когда элемент сворачивания становится видимым для пользователя (будет ожидать завершения переходов CSS).
const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // сделайте что-нибудь...
})