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

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

Плагин 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-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 Authoring Practices Guide аккордеонный шаблон - Вам нужно будет включить их самостоятельно в собственный 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 скрывает содержимое
• .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="{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, где последний заданный ключ-значение переопределяет другие.

Методы

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

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

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

События

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

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