Сворачиваемое

Переключайте видимость контента в вашем проекте с помощью нескольких классов и наших плагинов 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">
    Ссылка с атрибутом href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Кнопка с атрибутом data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Некоторый заполнитель для компонента сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
  </div>
</div>

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

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

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Включить сворачивание ширины
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      Это некий заполнитель для горизонтального свертывания. По умолчанию он скрыт и отображается при срабатывании.
    </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">Переключить первый элемент</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить второй элемент</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Некоторый заполнитель для первого компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Некоторое содержимое заполнителя для второго компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
      </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">
          Сворачиваемый групповой элемент #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Некоторый заполнитель для первой панели аккордеона. Эта панель отображается по умолчанию благодаря классу <code>.show</code>.
      </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">
          Сворачиваемый групповой элемент #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Некоторый заполнитель для второй панели аккордеона. По умолчанию эта панель скрыта.
      </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">
          Сворачиваемый групповой элемент #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        И, наконец, заполнитель для третьей и последней панели аккордеона. По умолчанию эта панель скрыта.
      </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 скрывает контент
• .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 () {
  // сделайте что-нибудь...
})