Сворачиваемое содержимое
Переключайте видимость контента в Вашем проекте с помощью нескольких классов и наших плагинов JavaScript.
Как это устроено
Плагин JavaScript сворачивания используется для отображения и скрытия содержимого. Кнопки или якоря используются как триггеры, которые сопоставляются с определенными элементами, которые Вы переключаете. Сворачивание элемента приведет к анимации height от текущего значения до 0 . Учитывая, как CSS обрабатывает анимацию, Вы не можете использовать padding для элемента .collapse . Вместо этого используйте класс как независимый элемент оболочки.
Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion . См. раздел с уменьшенным движением в нашей документации по специальным возможностям.
Пример
Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:
- .collapse скрывает содержимое
- .collapsing применяется во время переходов
- .collapse.show показывает содержимое
Как правило, мы рекомендуем использовать с атрибутом data-bs-target . Хотя это не рекомендуется с семантической точки зрения, Вы также можете использовать с атрибутом href (и role=»button» ). В обоих случаях требуется data-bs-toggle=»collapse» .
Некоторый заполнитель для компонента сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
p> a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Ссылка с href a> button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Кнопка с data-target button> p> div class="collapse" id="collapseExample"> div class="card card-body"> Некоторый заполнитель для компонента сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер. div> div>По горизонтали
Плагин коллапса также поддерживает горизонтальное сворачивание. Добавьте класс модификатора .collapse-horizontal , чтобы изменить width вместо height , и установите width непосредственно дочернему элементу. Вы можете написать свой собственный Sass, использовать встроенные стили или воспользоваться нашими утилитами ширины.
Обратите внимание, что хотя в приведенном ниже примере для избежания чрезмерного перерисовки в наших документах установлено значение min-height , это явно не требуется. Требуется только ширина width дочернего элемента.
Переключить ширину сворачиваемого
Это некий заполнитель для горизонтального сворачивания. По умолчанию он скрыт и отображается при срабатывании.
p> button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample"> Переключить ширину сворачиваемого button> p> div style="min-height: 120px;"> div class="collapse collapse-horizontal" id="collapseWidthExample"> div class="card card-body" style="width: 300px;"> Это некий заполнитель для горизонтального сворачивания. По умолчанию он скрыт и отображается при срабатывании. div> div> div>Несколько переключателей и целей
Переключить первый элемент Переключить второй элемент Переключить оба элемента
Некоторый заполнитель для первого компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
Некоторое содержимое заполнителя для второго компонента сворачивания в этом примере множественного сворачивания. Эта панель по умолчанию скрыта, но открывается, когда пользователь активирует соответствующий триггер.
p> a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить первый элементa> button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить второй элементbutton> button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>Доступность
Не забудьте добавить к элементу управления aria-expanded . Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, для программ чтения с экрана и аналогичных вспомогательных технологий. Если сворачиваемый элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-expanded=»false» . Если Вы установили открываемый сворачиваемый элемент по умолчанию с помощью класса show , вместо этого установите aria-expanded=»true» для элемента управления. Плагин автоматически переключит этот атрибут в элементе управления в зависимости от того, был ли открыт или закрыт сворачиваемый элемент (через JavaScript или потому, что пользователь активировал другой элемент управления, также связанный с тем же складным элементом). Если элемент HTML элемента управления не является кнопкой (например, или ), атрибут role=»button» должен быть добавлен к элементу.
Если Ваш элемент управления нацелен на один сворачиваемый элемент — т.е. атрибут data-bs-target указывает на селектор id Вы должны добавить атрибут aria-controls к элементу управления, содержащий id элемента управления. разборный элемент. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому сворачиваемому элементу.
Обратите внимание, что текущая реализация Bootstrap не распространяется на различные дополнительные взаимодействия с клавиатурой, описанные в ARIA Authoring Practices Guide аккордеонный шаблон — Вам нужно будет включить их самостоятельно в собственный JavaScript.
Collapse
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
How it works
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0 . Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.
The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.
Example
Click the buttons below to show and hide another element via class changes:
- .collapse hides content
- .collapsing is applied during transitions
- .collapse.show shows content
Generally, we recommend using a with the data-bs-target attribute. While not recommended from a semantic point of view, you can also use an link with the href attribute (and a role=»button» ). In both cases, the data-bs-toggle=»collapse» is required.
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
p class="d-inline-flex gap-1"> a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href a> button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-bs-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>Horizontal
The collapse plugin supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our width utilities.
Please note that while the example below has a min-height set to avoid excessive repaints in our docs, this is not explicitly required. Only the width on the child element is required.
This is some placeholder content for a horizontal collapse. It’s hidden by default and shown when triggered.
p> button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample"> Toggle width collapse button> p> div style="min-height: 120px;"> div class="collapse collapse-horizontal" id="collapseWidthExample"> div class="card card-body" style="width: 300px;"> This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered. div> div> div>Multiple toggles and targets
Toggle first element Toggle second element Toggle both elements
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.
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.
p class="d-inline-flex gap-1"> a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first elementa> button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second elementbutton> button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elementsbutton> 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>Accessibility
Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded=»false» . If you’ve set the collapsible element to be open by default using the show class, set aria-expanded=»true» on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element’s HTML element is not a button (e.g., an or ), the attribute role=»button» should be added to the element.
If your control element is targeting a single collapsible element – i.e. the data-bs-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
Note that Bootstrap’s current implementation does not cover the various optional keyboard interactions described in the ARIA Authoring Practices Guide accordion pattern — you will need to include these yourself with custom JavaScript.