Згорнути

Як це працює

Плагін 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і встановіть для 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;

Заняття

Класи переходу згортання можна знайти в 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.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...
})