Source

Крах

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

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

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

Пример

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

  • .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>

Несколько целей

Или <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>

Пример аккордеона

Используя компонент карты , вы можете расширить поведение свертывания по умолчанию, чтобы создать аккордеон.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. 3 wolf moon officia aute, non cupidatat скейтборд dolor brunch. Грузовик с едой лебеда nesciunt Laborum eiusmod. Бранч 3 волк луна темпор, сант аликва посадил птицу на него кальмар кофе одного происхождения нулла предполагаемнда шордитч и др. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident. Объявление веганским, кроме мясника, вице-ломо. Леггинсы occaecat крафтовое пиво с фермы на стол, сырой деним, эстетический синтезатор, вы, вероятно, не слышали о них, accusamus 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">
      <h5 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>
      </h5>
    </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">
      <h5 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>
      </h5>
    </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">
      <h5 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>
      </h5>
    </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 или потому, что пользователь активировал другой элемент управления, также привязанный к тому же сворачиваемому элементу). Если элемент 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.свернуть Это событие запускается, когда элемент свертывания становится видимым для пользователя (будет ожидать завершения переходов CSS).
скрыть.bs.collapse Это событие запускается сразу после вызова hideметода.
скрытый.bs.коллапс Это событие запускается, когда элемент свертывания был скрыт от пользователя (будет ожидать завершения переходов CSS). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})