Крах

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

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

Пример

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

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

Как правило, мы рекомендуем использовать кнопку с data-bs-targetатрибутом. Хотя это и не рекомендуется с семантической точки зрения, вы также можете использовать ссылку с hrefатрибутом (и role="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">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Горизонтальный

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

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </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">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </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.

Сасс

Переменные

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Классы

Классы перехода Collapse можно найти в scss/_transitions.scss, так как они являются общими для нескольких компонентов (collapse и аккордеон).

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

Методы

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

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

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

События

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})