Source

Згорнути

Перемкніть видимість вмісту у вашому проекті за допомогою кількох класів і наших плагінів JavaScript.

Як це працює

Плагін JavaScript для згортання використовується для показу та приховання вмісту. Кнопки або прив’язки використовуються як тригери, які зіставляються з певними елементами, які ви перемикаєте. Згортання елемента анімує heightйого поточне значення до 0. Зважаючи на те, як CSS обробляє анімацію, ви не можете використовувати paddingдля .collapseелемента. Замість цього використовуйте клас як незалежний елемент обгортки.

Ефект анімації цього компонента залежить від prefers-reduced-motionмедіа-запиту. Перегляньте розділ про обмежений рух нашої документації щодо спеціальних можливостей .

приклад

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

  • .collapseприховує вміст
  • .collapsingзастосовується під час переходів
  • .collapse.showпоказує вміст

Ви можете використовувати посилання з hrefатрибутом або кнопку з data-targetатрибутом. В обох випадках data-toggle="collapse"потрібно.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Кілька цілей

A <button>або <a>може показувати та приховувати кілька елементів, посилаючись на них за допомогою селектора JQuery в атрибуті hrefабо . data-targetКілька <button>або <a>можуть показувати та приховувати елемент, якщо кожен з них посилається на нього за допомогою свого атрибута hrefабоdata-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Приклад баяна

Використовуючи компонент карти , ви можете розширити типову поведінку згортання, щоб створити гармошку. Щоб правильно домогтися стилю гармошка, обов'язково використовуйте .accordionв якості обгортки.

Анімаційний фрагмент кліше, який заперечує, eim eiusmod світське життя, обвинувачений Террі Річардсон і кальмар. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Бранч 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin кава nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Оголошення веганського винятку м'ясника віце-ломо. Легінси occaecat крафтове пиво від ферми до столу, сирий денім естетичний синтетичний nesciunt ви, мабуть, не чули про них acusamus labore стійкий VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Доступність

Обов'язково додайте aria-expandedдо елемента управління. Цей атрибут явно передає поточний стан елемента, що згортається, пов’язаного з елементом керування програмами зчитування з екрана та подібними допоміжними технологіями. Якщо елемент, що згортається, закрито за замовчуванням, атрибут елемента керування має мати значення aria-expanded="false". Якщо ви встановили, що елемент, що згортається, відкритий за замовчуванням за допомогою showкласу, aria-expanded="true"замість цього встановіть елемент керування. Плагін автоматично перемикатиме цей атрибут на елементі керування залежно від того, чи відкрився чи закривався згорнутий елемент (через JavaScript або через те, що користувач активував інший елемент керування, також прив’язаний до того самого елемента collapsbile). Якщо елемент HTML елемента керування не є кнопкою (наприклад, <a>або <div>), атрибутrole="button"слід додати до елемента.

Якщо ваш елемент керування націлений на один елемент, що згортається, тобто data-targetатрибут вказує на idселектор, вам слід додати aria-controlsатрибут до елемента керування, який містить елемент, що idзгортається. Сучасні програми зчитування з екрана та подібні допоміжні технології використовують цей атрибут, щоб надати користувачам додаткові ярлики для переходу безпосередньо до самого елемента, що згортається.

Зауважте, що поточна реалізація Bootstrap не охоплює різноманітні взаємодії з клавіатурою, описані в акордеонному шаблоні WAI-ARIA Authoring Practices 1.1 – вам потрібно буде включити їх самостійно за допомогою спеціального JavaScript.

Використання

Плагін згортання використовує кілька класів для обробки важких завдань:

  • .collapseприховує вміст
  • .collapse.showпоказує вміст
  • .collapsingдодається, коли перехід починається, і видаляється, коли він завершується

Ці класи можна знайти в _transitions.scss.

Через атрибути даних

Просто додайте data-toggle="collapse"та data-targetдо елемента, щоб автоматично призначити керування одним або декількома складними елементами. Атрибут data-targetприймає селектор CSS для застосування згортання. Обов’язково додайте клас collapseдо розбірного елемента. Якщо ви хочете, щоб він відкривався за умовчанням, додайте додатковий клас show.

Щоб додати до згорнутої області керування групами, схоже на акордеон, додайте атрибут даних data-parent="#selector". Перегляньте демонстрацію, щоб побачити це в дії.

Через JavaScript

Увімкнути вручну за допомогою:

$('.collapse').collapse()

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-, як у data-parent="".

Ім'я Тип За замовчуванням опис
батькові селектор | Об'єкт jQuery | Елемент DOM помилковий Якщо вказано батьківський елемент, усі елементи, що згортаються, у вказаному батьківському елементі будуть закриті, коли буде показано цей згорнутий елемент. (подібна до традиційної поведінки акордеона - це залежить від cardкласу). Атрибут має бути встановлено на цільовій складній області.
перемикач логічний правда Перемикає елемент, що згортається, під час виклику

методи

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

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

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

.collapse(options)

Активує ваш вміст як складний елемент. Приймає додаткові параметри object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Перемикає елемент, що згортається, на показаний або прихований. Повертається до абонента до того, як згорнутий елемент буде фактично показано або приховано (тобто до того, як відбудеться подія shown.bs.collapseабо ).hidden.bs.collapse

.collapse('show')

Показує розбірний елемент. Повертається до абонента до того, як згорнутий елемент буде фактично показано (тобто до того , як відбудеться shown.bs.collapseподія).

.collapse('hide')

Приховує розбірний елемент. Повертається до абонента до того, як згорнутий елемент буде фактично приховано (тобто до того , як відбудеться hidden.bs.collapseподія).

.collapse('dispose')

Руйнує колапс елемента.

Події

Клас згортання Bootstrap надає кілька подій для підключення до функціональності згортання.

Тип події опис
show.bs.collapse Ця подія запускається негайно, коли showвикликається метод екземпляра.
показано.bs.collapse Ця подія запускається, коли елемент згортання стає видимим для користувача (чекатиме, поки завершаться переходи CSS).
hide.bs.collapse Ця подія запускається відразу після виклику hideметоду.
hidden.bs.collapse Ця подія запускається, коли елемент згортання приховано від користувача (чекатиме, поки завершаться переходи CSS). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})