Collapse
Переключайте видимость контента в вашем проекте несколькими классами, нашим плагином переключения видимости и JavaScript.
Как работает
Плагин свертывания JavaScript используется для показа\скрытия контента. Кнопки или ссылки используются как триггеры, «нацеленные» на определенные элементы, которые надо скрыть\показать. Изменение состояния элемента происходит с помощью height
- изменением его с текущего до 0
. В связи с тем, как CSS обрабатывает анимации, мы не можете использовать padding
в элементе класса .collapse
. Вместо padding
используйте независимый «оборачивающий» элемент.
Примеры
Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:
.collapse
скрывает содержимое.collapsing
применяется во время переходов.collapse.show
показывает содержимое
Вы можете использовать ссылку с атрибутом href
или кнопку с атрибутом data-target
. В обоих случаях требуется атрибут 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">
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>
могут показывать и прятать сразу несколько элементов, обращаясь к их атрибутам href
или data-target
через селектор jQuery. Несколько <button>
или <a>
могут показывать или прятать один элемент, если каждый из них обращается к элементу через свои атрибуты href
или data-target
.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить 1-ый элемент</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить 2-ой элемент</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">
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>
Разворачиваемые панели
Используя компонент «карточка», можно расширить стандартное поведение сворачивания для создания «аккордеона», т.е. столбца сворачиваемых панелей (для экономии места).
Доступность
Добавьте aria-expanded
к «контролирующему» элементу. Этот атрибут явно передает текущее состояние скрываемого элемента, привязанного к «контролирующему» элементу, «экранным читалкам» и прочим вспомогательным технологиям. Если скрываемый элемент скрыт по умолчанию, его aria-expanded должен быть "false" aria-expanded="false"
. Если раньше вы определяли скрываемый элемент показываемым по умолчанию через класс show
, теперь используйте вместо этого класса aria-expanded="true"
в «контролирующем» элементе. Основываясь на том, показан или скрыт элемент, плагин будет автоматически переключать этот атрибут (через JavaScript либо через отслеживание клика по другому «контролирующему» элементу, связанному с данным скрываемым элементом). If the control element’s HTML element is not a button (e.g., an <a>
or <div>
), the attribute role="button"
should be added to the element.
Дополнение: если ваш «контролирующий» элемент взаимодействует с одним скрываемым элементом – т.е. атрибут data-target
указывает на #id
– вы можете добавить дополнительный атрибут aria-controls
к «контролирующему» элементу, содержащему #id
этого скрываемого элемента.
Заметим, что текущая версия Bootstrap не работает с различными событиями взаимодействия с клавиатурой, описанными в WAI-ARIA Authoring Practices 1.1 accordion pattern - и вам потребуется подключить эти события с помощью обычного JavaScript.
Использование
Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:
.collapse
прячет содержимое.collapse.show
показывает содержимое.collapsing
добавляется, когда переход начинается и удаляется с его завершением
Эти классы можно найти в _transitions.scss
.
Через атрибуты
Добавьте в элемент атрибуты data-toggle="collapse"
и data-target
для автоматического контроля одного или более скрываемых элементов. Атрибут data-target
принимает CSS-селектор для применения к нему поведения toggle’a. Удостоверьтесь, что добавили в скрываемый элемент класс collapse
. Если он должен быть показан по умолчанию, добавьте в него класс show
.
Для добавления компактно расположенной (см. Разворачиваемые панели для экономии места) группы «контролирующих» элементов добавьте атрибут data-parent="#selector"
. Обратитесь к демо для просмотра в действии.
Через JavaScript
Активируйте вручную:
Параметры
Параметры можно передавать через атрибуты или JavaScript. Чтобы сделать это через атрибуты, добавьте имя параметра к data-
, например data-parent=""
.
Имя | Тип | По умолч. | Описание |
---|---|---|---|
parent | selector | jQuery object | DOM element | false | Если есть родительский элемент, все скрываемые элементы под определенным «родителем» закроются, когда он открыт (как в «аккордеоне» - это зависит от класса card ). Атрибут нужно устанавливать в скрываемой зоне. |
toggle | boolean | true | Взаимодействует с скрываемым элементом по обращению |
Методы
Асинхронные методы и переходы
Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.
.collapse(options)
Задействует ваше содержимое как скрываемый элемент. Принимает object
дополнительных опций.
.collapse('toggle')
Задействует на скрываемом элементе функциональность toggle’а (hide\show). Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки событий shown.bs.collapse
или hidden.bs.collapse
event occurs).
.collapse('show')
Показывает скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события shown.bs.collapse
).
.collapse('hide')
Прячет скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события hidden.bs.collapse
).
.collapse('dispose')
Уничтожает «коллпас» элемента.
События
Класс «коллапса» в Bootstrap содержит несколько событий для вовлечения, взаимодействия и связи иных событий JS с функциональностью «коллапса».
Тип события | Описание |
---|---|
show.bs.collapse | Это событие наступает немедленно по вызову экземпляра метода show . |
shown.bs.collapse | Это событие наступает, когда элемент «коллапса» сделан видимым юзеру (будет ждать выполнения CSS-переходов). |
hide.bs.collapse | Это событие наступает немедленно по вызову метода hide . |
hidden.bs.collapse | Это событие наступает как только элемент «коллапса» скрыт от юзера (будет ждать выполнения CSS-переходов). |