Bootstrap 4 аккордеон примеры

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 it’s 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.

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

You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle=»collapse» is required.

Link with href Button with data-target

Multiple targets

Toggle first element Toggle second element Toggle both elements

Accordion example

Using the card component, you can extend the default collapse behavior to create an accordion.

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

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 collapsbile element). If the control element’s HTML element is not a button (e.g., an or

If your control element is targeting a single collapsible element – i.e. the data-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 keyboard interactions described in the WAI-ARIA Authoring Practices 1.1 accordion pattern — you will need to include these yourself with custom JavaScript.

Usage

The collapse plugin utilizes a few classes to handle the heavy lifting:

• .collapse hides the content
• .collapse.show shows the content
• .collapsing is added when the transition starts, and removed when it finishes

These classes can be found in _transitions.scss .

Via data attributes

Just add data-toggle=»collapse» and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you’d like it to default open, add the additional class show .

To add accordion-like group management to a collapsible area, add the data attribute data-parent=»#selector» . Refer to the demo to see this in action.

Via JavaScript

Enable manually with:

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data- , as in data-parent=»» .

Name	Type	Default	Description
parent	selector | jQuery object | DOM element	false	If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior — this is dependent on the card class). The attribute has to be set on the target collapsible area.
toggle	boolean	true	Toggles the collapsible element on invocation

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

.collapse(options)

Activates your content as a collapsible element. Accepts an optional options object .

.collapse(‘toggle’)

Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.bs.collapse or hidden.bs.collapse event occurs).

.collapse(‘show’)

Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (i.e. before the shown.bs.collapse event occurs).

.collapse(‘hide’)

Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (i.e. before the hidden.bs.collapse event occurs).

.collapse(‘dispose’)

Destroys an element’s collapse.

Events

Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

Источник

Компоненты

Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.

Collapse

В Bootstrap плагин свертывание позволяет переключать контент на ваших страницах с помощью нескольких классов благодаря некоторым полезным JavaScript.

Содержание

Пример

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

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

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

Link with href Button with data-target

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

Унаследовать collapse по умолчанию, чтобы создать аккордеон.

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Доступность

Не забудьте добавить aria-expanded элементу управления. Этот атрибут однозначно определяет ток состояние сборного элемента на экране читателей и подобных вспомогательных технологий. Если складной элемент закрыт по умолчанию, он должен иметь значение aria-expanded=»false» . Если вы установите складной элемент, который будет открыт по умолчанию, используя in класс, набор aria-expanded=»true» , а не на контроль. Плагин будет автоматически переключаться на этот атрибут, если не разборный элемент был открыт или закрыт.

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

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

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

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

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

С помощью данных атрибутов

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

Чтобы добавить гармошкой управления группа складной-контроль, добавьте атрибут Data data-parent=»#selector» . Ознакомьтесь с демо, чтобы увидеть это в действии.

Через JavaScript

Варианты

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

Имя	Тип	По умолчанию	Описание
parent	selector	false	Если имеется селектор, потом все разборные элементы в указанной родительской будет закрыт, когда этот складной элемент отображается. (аналог традиционного поведения аккордеон — это зависит от panel класс)
toggle	boolean	true	Переключает складной элемент на вызов

Методы

.collapse(options)

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

.collapse(‘toggle’)

Переключает складной элемент показаны или скрыты.

.collapse(‘show’)

Показывает складной элемент.

.collapse(‘hide’)

Скрывает складной элемент.

События

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

Тип События	Описание
show.bs.collapse	Это событие возникает сразу же, когда show способ экземпляра называется.
shown.bs.collapse	Это событие запускается, когда элемент развал был сделан видимым для пользователя (будет ждать CSS переходы для завершения).
hide.bs.collapse	Это событие сразу же уволили, когда hide метод был вызван.
hidden.bs.collapse	Это событие запускается, когда элемент развал был скрыт от пользователя (будет ждать CSS переходы для завершения).

Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.

Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.

Источник

Collapse

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

Примеры

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

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

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

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

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

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

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

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

Разворачиваемая панель #1

Разворачиваемая панель #2

Разворачиваемая панель #3

Доступность

Добавьте aria-expanded к «контролирующему» элементу. Этот атрибут явно передает текущее состояние скрываемого элемента, привязанного к «контролирующему» элементу, «экранным читалкам» и прочим вспомогательным технологиям. Если скрываемый элемент скрыт по умолчанию, его aria-expanded должен быть «false» aria-expanded=»false» . Если раньше вы определяли скрываемый элемент показываемым по умолчанию через класс show , теперь используйте вместо этого класса aria-expanded=»true» в «контролирующем» элементе. Основываясь на том, показан или скрыт элемент, плагин будет автоматически переключать этот атрибут (через JavaScript либо через отслеживание клика по другому «контролирующему» элементу, связанному с данным скрываемым элементом).

Дополнение: если ваш «контролирующий» элемент взаимодействует с одним скрываемым элементом – т.е. атрибут data-target указывает на # id – вы можете добавить дополнительный атрибут aria-controls к «контролирующему» элементу, содержащему # id этого скрываемого элемента.

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

Плагин «скрытия\показа» использует несколько классов для работы 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 с функциональностью «коллапса».

Источник