Bootstrap collapse как работать

Обновлено: 05.07.2024

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

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

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

Переключить первый элемент Переключить второй элемент Переключить оба элемента

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

Примеры

Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:

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

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

Ссылка с 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.

Пример

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

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

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

Ссылка с href Кнопка с data-target

Некоторый заполнитель для компонента сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.

Разворачиваемые панели

Используя компонент «карточка», можно расширить стандартное поведение сворачивания для создания «аккордеона», т.е. столбца сворачиваемых панелей (для экономии места).

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

Примеры

Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:

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

Ссылка с 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.

Взаимодействие со множественными объектами

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

Переключить 1-ый элемент Переключить 2-ой элемент Переключить оба элемента

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.

Доступность

Не забудьте добавить к элементу управления 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.

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

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

Некоторый заполнитель для первой панели аккордеона. Эта панель отображается по умолчанию благодаря классу .show . Некоторый заполнитель для второй панели аккордеона. По умолчанию эта панель скрыта. И, наконец, заполнитель для третьей и последней панели аккордеона. По умолчанию эта панель скрыта.

Доступность

Не забудьте добавить к элементу управления aria-expanded . Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-expanded="false" . Если Вы установили открываемый складной элемент по умолчанию с помощью класса show , вместо этого установите aria-expanded="true" для элемента управления. Плагин автоматически переключит этот атрибут в элементе управления в зависимости от того, был ли открыт или закрыт складной элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также связанный с тем же складным элементом). Если элемент HTML элемента управления не является кнопкой (например, <a> или <div> ), атрибут role="button" должен быть добавлен к элементу.

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

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

Переменные

Классы

Классы перехода сворачивания можно найти в scss/_transitions.scss , поскольку они используются в нескольких компонентах (сворачивание и аккордеон).

Collapse

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

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

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

Переключить первый элемент Переключить второй элемент Переключить оба элемента

Пример

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

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

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

Ссылка с атрибутом href Кнопка с атрибутом data-target

Использование

Плагин collapse использует несколько классов для работы:

.collapse скрывает содержимое
.collapse.show показывает содержимое
.collapsing добавляется, когда переход начинается, и удаляется, когда он заканчивается

Эти классы можно найти в _transitions.scss .

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

Просто добавьте к элементу data-bs-toggle="collapse" и data-bs-target , чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. Атрибут data-bs-target принимает CSS-селектор, к которому применяется коллапс. Не забудьте добавить к складному элементу класс collapse . Если Вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show .

Через JavaScript

Включить вручную с помощью:

Параметры

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

Наименование	Тип	По умолчанию	Описание
parent	selector \| jQuery object \| DOM element	false	Если указан родительский элемент, все складные элементы в указанном родительском элементе будут закрыты при отображении этого складного элемента. (аналогично традиционному поведению аккордеона - это зависит от класса card ). Атрибут должен быть установлен в целевой складной области.
toggle	boolean	true	Переключает сворачиваемый элемент при вызове

Методы

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

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

Активирует Ваш контент как складной элемент. Принимает необязательные параметры object .

Вы можете создать экземпляр сворачивания с помощью конструктора, например:

Метод	Описание
toggle	Переключает складной элемент на показанный или скрытый. Возврат к вызывающей стороне до того, как сворачиваемый элемент будет фактически показан или скрыт (то есть событие происходит до shown.bs.collapse или hidden.bs.collapse ).
show	Показывает разборный элемент. Возврат к вызывающей стороне до фактического отображения сворачиваемого элемента (например, до возникновения события shown.bs.collapse ).
hide	Скрывает разборный элемент. Возврат к вызывающей стороне до фактического скрытия сворачиваемого элемента (например, до возникновения события hidden.bs.collapse ).
dispose	Уничтожает сворачиваемый элемент. (Удаляет сохраненные данные в элементе DOM)
getInstance	Статический метод, который позволяет вам получить экземпляр коллапса, связанный с элементом DOM, вы можете использовать его следующим образом: bootstrap.Collapse.getInstance(element)
getOrCreateInstance	Статический метод, который возвращает экземпляр коллапса, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать это так: bootstrap.Collapse.getOrCreateInstance(element)

События

Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса.

Разворачиваемые панели

Collapse

Как работает

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

Применение

Плагин collapse использует несколько классов для работы с тяжелой работой:

.collapse скрывает контент
.collapse.show показывает контент
.collapsing добавляется, когда переход начинается, и удаляется, когда он заканчивается

Эти классы можно найти в _transitions.scss .

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

Просто добавьте к элементу data-toggle="collapse" и data-target , чтобы автоматически назначить управление одним или несколькими сворачиваемыми элементами. Атрибут data-target принимает CSS-селектор, к которому нужно применить сворачивание. Обязательно добавьте к сворачиваемому элементу класс collapse . Если Вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс show .

Через JavaScript

Включить вручную с помощью:

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data- , как в data-parent="" .

Имя	Тип	По умолчанию	Описание
parent	selector \| jQuery object \| DOM element	false	Если указан родительский элемент, все складные элементы в указанном родительском элементе будут закрыты при отображении этого сворачиваемого элемента. (аналогично традиционному поведению аккордеона - это зависит от класса card ). Атрибут должен быть установлен в целевой сворачиваемой области.
toggle	boolean	true	Переключает сворачиваемый элемент при вызове

Методы

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

.collapse(options)

Активирует Ваш контент как складной элемент. Принимает необязательные параметры object .

.collapse('toggle')

Переключает складной элемент на показанный или скрытый. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт (т.е. до того, как произойдет событие shown.bs.collapse или hidden.bs.collapse ).

.collapse('show')

Показывает разборный элемент. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан (то есть до того, как произойдет событие shown.bs.collapse ).

.collapse('hide')

Скрывает разборный элемент. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически скрыт (т.е. до того, как произойдет событие hidden.bs.collapse ).

.collapse('dispose')

Уничтожает вышеуказанный сворачиваемый элемент.

События

Класс сворачивания Bootstrap предоставляет несколько событий для подключения к функциональности сворачивания.

Взаимодействие со множественными объектами

Переключить 1-ый элемент Переключить 2-ой элемент Переключить оба элемента

Использование

Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:

.collapse прячет содержимое
.collapse.show показывает содержимое
.collapsing добавляется, когда переход начинается и удаляется с его завершением

Эти классы можно найти в _transitions.scss .

Через атрибуты

Добавьте в элемент атрибуты data-toggle="collapse" и data-target для автоматического контроля одного или более скрываемых элементов. Атрибут data-target принимает CSS-селектор для применения к нему поведения toggle’a. Удостоверьтесь, что добавили в скрываемый элемент класс collapse . Если он должен быть показан по умолчанию, добавьте в него класс show .

Через 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 с функциональностью «коллапса».

Доступность

Добавьте 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.

Заметим, что текущая версия Bootstrap не работает с различными событиями взаимодействия с клавиатурой, описанными в WAI-ARIA Authoring Practices 1.1 accordion pattern - и вам потребуется подключить эти события с помощью обычного JavaScript.

По горизонтали

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

Обратите внимание, что хотя в приведенном ниже примере для избежания чрезмерного перерисовки в наших документах установлено значение min-height , это явно не требуется. Требуется только ширина width дочернего элемента.

Переключить ширину сворачиваемого

Это некий заполнитель для горизонтального сворачивания. По умолчанию он скрыт и отображается при срабатывании.

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

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

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

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

Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion . См. Раздел с уменьшенным движением в нашей документации по специальным возможностям.

Использование

Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:

.collapse прячет содержимое
.collapse.show показывает содержимое
.collapsing добавляется, когда переход начинается и удаляется с его завершением

Эти классы можно найти в _transitions.scss .

Через атрибуты

Через JavaScript

Параметры

Имя	Тип	По умолч.	Описание
parent	selector \| jQuery object \| DOM element	false	Если есть родительский элемент, все скрываемые элементы под определенным «родителем» закроются, когда он открыт (как в «аккордеоне» - это зависит от класса card ). Атрибут нужно устанавливать в скрываемой зоне.
toggle	boolean	true	Взаимодействует с скрываемым элементом по обращению

Методы

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

.collapse(options)

Задействует ваше содержимое как скрываемый элемент. Принимает object дополнительных опций.

.collapse('toggle')

.collapse('show')

.collapse('hide')

.collapse('dispose')

Уничтожает «коллпас» элемента.

События

Как это устроено

Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion . См. раздел с уменьшенным движением в нашей документации по специальным возможностям.

Доступность

Читайте также: