Крах

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

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

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

Пример

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

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

Как правило, мы рекомендуем использовать кнопку с data-targetатрибутом. Хотя это и не рекомендуется с семантической точки зрения, вы также можете использовать ссылку с hrefатрибутом (и role="button"). В обоих случаях data-toggle="collapse"требуется .

<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">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

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

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

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

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

Или <button>может <a>отображать и скрывать несколько элементов, ссылаясь на них с помощью селектора JQuery в своем атрибуте hrefили . data-targetНесколько <button>или <a>могут отображать и скрывать элемент, если каждый из них ссылается на него со своим атрибутом hrefилиdata-target

<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">
        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>

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

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

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" 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">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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 не охватывает различные взаимодействия с клавиатурой, описанные в аккордеонном шаблоне ARIA Authoring Practices Guide — вам нужно будет включить их самостоятельно с помощью пользовательского 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="".

Методы

.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 предоставляет несколько событий для подключения к функциональности коллапса.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})