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

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

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

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

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

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

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

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.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}'.

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

Методы

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

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

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

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

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

const 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).
const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // сделайте что-нибудь...
})