Аккордеон

Создавайте вертикально сворачиваемые аккордеоны в сочетании с нашим JavaScript плагином Collapse.

На этой странице

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

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

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

Пример

Нажмите на аккордеоны ниже, чтобы развернуть/свернуть содержимое аккордеона.

Чтобы отобразить аккордеон, который развернут по умолчанию:

добавьте класс .show на элемент .accordion-collapse.
удалите класс .collapsed из элемента .accordion-button и установите его атрибут aria-expanded в true.

Это тело первого элемента аккордеона. Оно отображается по умолчанию, пока плагин collapse не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы контролируют общий внешний вид, а также показ и скрытие через CSS переходы. Вы можете изменить любое из этого с помощью пользовательского CSS или переопределения наших переменных по умолчанию. Также стоит отметить, что практически любой HTML может быть внутри .accordion-body, хотя переход ограничивает переполнение.

Это тело второго элемента аккордеона. Оно скрыто по умолчанию, пока плагин collapse не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы контролируют общий внешний вид, а также показ и скрытие через CSS переходы. Вы можете изменить любое из этого с помощью пользовательского CSS или переопределения наших переменных по умолчанию. Также стоит отметить, что практически любой HTML может быть внутри .accordion-body, хотя переход ограничивает переполнение.

Это тело третьего элемента аккордеона. Оно скрыто по умолчанию, пока плагин collapse не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы контролируют общий внешний вид, а также показ и скрытие через CSS переходы. Вы можете изменить любое из этого с помощью пользовательского CSS или переопределения наших переменных по умолчанию. Также стоит отметить, что практически любой HTML может быть внутри .accordion-body, хотя переход ограничивает переполнение.

html

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Элемент аккордеона #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Это тело первого элемента аккордеона.</strong> Оно отображается по умолчанию, пока плагин collapse не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы контролируют общий внешний вид, а также показ и скрытие через CSS переходы. Вы можете изменить любое из этого с помощью пользовательского CSS или переопределения наших переменных по умолчанию. Также стоит отметить, что практически любой HTML может быть внутри <code>.accordion-body</code>, хотя переход ограничивает переполнение.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Элемент аккордеона #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Это тело второго элемента аккордеона.</strong> Оно скрыто по умолчанию, пока плагин collapse не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы контролируют общий внешний вид, а также показ и скрытие через CSS переходы. Вы можете изменить любое из этого с помощью пользовательского CSS или переопределения наших переменных по умолчанию. Также стоит отметить, что практически любой HTML может быть внутри <code>.accordion-body</code>, хотя переход ограничивает переполнение.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Элемент аккордеона #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Это тело третьего элемента аккордеона.</strong> Оно скрыто по умолчанию, пока плагин collapse не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы контролируют общий внешний вид, а также показ и скрытие через CSS переходы. Вы можете изменить любое из этого с помощью пользовательского CSS или переопределения наших переменных по умолчанию. Также стоит отметить, что практически любой HTML может быть внутри <code>.accordion-body</code>, хотя переход ограничивает переполнение.
      </div>
    </div>
  </div>
</div>

Без границ

Добавьте .accordion-flush, чтобы удалить некоторые границы и скругленные углы для отображения аккордеонов от края до края с их родительским контейнером.

Заполнитель содержимого для этого аккордеона, который предназначен для демонстрации класса .accordion-flush. Это тело первого элемента аккордеона.

Заполнитель содержимого для этого аккордеона, который предназначен для демонстрации класса .accordion-flush. Это тело второго элемента аккордеона. Давайте представим, что это заполнено каким-то реальным содержимым.

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

html

<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        Элемент аккордеона #1
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Заполнитель содержимого для этого аккордеона, который предназначен для демонстрации класса <code>.accordion-flush</code>. Это тело первого элемента аккордеона.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        Элемент аккордеона #2
      </button>
    </h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Заполнитель содержимого для этого аккордеона, который предназначен для демонстрации класса <code>.accordion-flush</code>. Это тело второго элемента аккордеона. Давайте представим, что это заполнено каким-то реальным содержимым.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
        Элемент аккордеона #3
      </button>
    </h2>
    <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Заполнитель содержимого для этого аккордеона, который предназначен для демонстрации класса <code>.accordion-flush</code>. Это тело третьего элемента аккордеона. Ничего более захватывающего не происходит здесь с точки зрения содержимого, но просто заполнение пространства, чтобы сделать его похожим, по крайней мере на первый взгляд, немного более репрезентативным того, как это будет выглядеть в реальном приложении.</div>
    </div>
  </div>
</div>

Всегда открытый

Пропустите атрибут data-bs-parent на каждом .accordion-collapse, чтобы элементы аккордеона оставались открытыми, когда открывается другой элемент.

html

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Элемент аккордеона #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
      <div class="accordion-body">
        <strong>Это тело первого элемента аккордеона.</strong> Оно отображается по умолчанию, пока плагин collapse не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы контролируют общий внешний вид, а также показ и скрытие через CSS переходы. Вы можете изменить любое из этого с помощью пользовательского CSS или переопределения наших переменных по умолчанию. Также стоит отметить, что практически любой HTML может быть внутри <code>.accordion-body</code>, хотя переход ограничивает переполнение.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
        Элемент аккордеона #2
      </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
      <div class="accordion-body">
        <strong>Это тело второго элемента аккордеона.</strong> Оно скрыто по умолчанию, пока плагин collapse не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы контролируют общий внешний вид, а также показ и скрытие через CSS переходы. Вы можете изменить любое из этого с помощью пользовательского CSS или переопределения наших переменных по умолчанию. Также стоит отметить, что практически любой HTML может быть внутри <code>.accordion-body</code>, хотя переход ограничивает переполнение.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
        Элемент аккордеона #3
      </button>
    </h2>
    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
      <div class="accordion-body">
        <strong>Это тело третьего элемента аккордеона.</strong> Оно скрыто по умолчанию, пока плагин collapse не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы контролируют общий внешний вид, а также показ и скрытие через CSS переходы. Вы можете изменить любое из этого с помощью пользовательского CSS или переопределения наших переменных по умолчанию. Также стоит отметить, что практически любой HTML может быть внутри <code>.accordion-body</code>, хотя переход ограничивает переполнение.
      </div>
    </div>
  </div>
</div>

Доступность

Пожалуйста, прочитайте раздел о доступности collapse для получения дополнительной информации.

CSS

Переменные

Добавлено в v5.2.0

Как часть развивающегося подхода Bootstrap к CSS переменным, аккордеоны теперь используют локальные CSS переменные на .accordion для улучшенной настройки в реальном времени. Значения для CSS переменных устанавливаются через Sass, поэтому настройка Sass также поддерживается.

scss/_accordion.scss

--#{$prefix}accordion-color: #{$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};

Sass переменные

scss/_variables.scss

$accordion-padding-y:                     1rem;
$accordion-padding-x:                     1.25rem;
$accordion-color:                         var(--#{$prefix}body-color);
$accordion-bg:                            var(--#{$prefix}body-bg);
$accordion-border-width:                  var(--#{$prefix}border-width);
$accordion-border-color:                  var(--#{$prefix}border-color);
$accordion-border-radius:                 var(--#{$prefix}border-radius);
$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width);

$accordion-body-padding-y:                $accordion-padding-y;
$accordion-body-padding-x:                $accordion-padding-x;

$accordion-button-padding-y:              $accordion-padding-y;
$accordion-button-padding-x:              $accordion-padding-x;
$accordion-button-color:                  var(--#{$prefix}body-color);
$accordion-button-bg:                     var(--#{$prefix}accordion-bg);
$accordion-transition:                    $btn-transition, border-radius .15s ease;
$accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle);
$accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis);

// fusv-disable
$accordion-button-focus-border-color:     $input-focus-border-color; // Deprecated in v5.3.3
// fusv-enable
$accordion-button-focus-box-shadow:       $btn-focus-box-shadow;

$accordion-icon-width:                    1.25rem;
$accordion-icon-color:                    $body-color;
$accordion-icon-active-color:             $primary-text-emphasis;
$accordion-icon-transition:               transform .2s ease-in-out;
$accordion-icon-transform:                rotate(-180deg);

$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>");
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>");

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

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

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

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

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

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

Чтобы добавить управление группой аккордеона к сворачиваемой области, добавьте атрибут данных data-bs-parent="#selector".

Через JavaScript

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

const accordionCollapseElementList = document.querySelectorAll('#myAccordion .collapse')
const accordionCollapseList = [...accordionCollapseElementList].map(accordionCollapseEl => new bootstrap.Collapse(accordionCollapseEl))

Опции

Поскольку опции могут передаваться через атрибуты данных или JavaScript, вы можете добавить имя опции к data-bs-, например, data-bs-animation="{value}". Обязательно изменяйте стиль написания имени опции с “camelCase” на “kebab-case” при передаче опций через атрибуты данных. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный зарезервированный атрибут данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", окончательное значение title будет 456, а отдельные атрибуты данных переопределяют значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Окончательный объект конфигурации — это объединенный результат data-bs-config, data-bs- и js object, где последний заданный ключ-значение переопределяет другие.

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

Методы

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

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

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

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

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

События

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

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // сделать что-то...
})