Bootstrap Accordion (аккордеон)

Accordion (или аккордеон) - это важный компонент современной веб-разработки, который позволяет организовать и представить контент в структурированной и интуитивно понятной форме. В этой документации - уроке рассмотрим, как использовать компонент Accordion в Bootstrap 5 для создания интерактивных и удобных пользовательских интерфейсов.

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

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

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

Пример

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

<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> Оно отображается по умолчанию, пока плагин свертывания не добавит соответствующие классы, которые используются для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и сокрытием с помощью переходов 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> По умолчанию оно скрыто, пока плагин свертывания не добавит соответствующие классы, которые используются для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и сокрытием с помощью переходов 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> По умолчанию оно скрыто, пока плагин свертывания не добавит соответствующие классы, которые используются для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и сокрытием с помощью переходов CSS. Вы можете изменить все это с помощью специального CSS или переопределив переменные по умолчанию. Также стоит отметить, что практически любой HTML-код может находиться внутри <code>.accordion-body</code>, хотя переход ограничивает переполнение.
      </div>
    </div>
  </div>
</div>

Результат:

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

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

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

Флеш

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

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

Результат:

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

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

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

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

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

<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> Оно отображается по умолчанию, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и сокрытием с помощью переходов 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> По умолчанию оно скрыто, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и сокрытием с помощью переходов 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> По умолчанию оно скрыто, пока плагин свертывания не добавит соответствующие классы, которые мы используем для стилизации каждого элемента. Эти классы управляют общим внешним видом, а также отображением и сокрытием с помощью переходов CSS. Вы можете изменить все это с помощью специального CSS или переопределив переменные по умолчанию. Также стоит отметить, что практически любой HTML-код может находиться внутри <code>.accordion-body</code>, хотя переход ограничивает переполнение.
      </div>
    </div>
  </div>
</div>

Результат:

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

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

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

Специальные возможности

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

CSS

Переменные

Добавлено в версии 5.2.0

В рамках развивающегося подхода Bootstrap к CSS-переменным, accordions теперь используют локальные 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-border-color: #{$accordion-button-focus-border-color};
--#{$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);

$accordion-button-focus-border-color:     $input-focus-border-color;
$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='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");

FAQ (ответы на часто задаваемые вопросы)

Как изменить стили аккордеона?

Вы можете настроить внешний вид аккордеона с помощью пользовательского CSS или переопределения переменных Bootstrap.

Как добавить дополнительные элементы внутри .accordion-body?

Вы можете вставить любой HTML-контент внутри .accordion-body. Однако следует учитывать, что анимация ограничивает переполнение.

Как изменить цвет фона аккордеона?

Для изменения цвета фона аккордеона, вы можете добавить пользовательский CSS для класса .accordion-body. Например:

.accordion-body {
    background-color: #f8f9fa; /* Ваш цвет фона */
}

Как добавить анимацию при раскрытии и сворачивании блоков?

Bootstrap 5 автоматически добавляет анимацию при использовании компонента Accordion. Вы можете настроить скорость анимации с помощью CSS-переменных Bootstrap.

Как сделать аккордеон с несколькими открытыми блоками одновременно?

Добавьте атрибут data-bs-parent="#accordionExample" к каждому элементу .accordion-item. Это позволит открывать несколько блоков одновременно.

Как скрыть стрелку в заголовке аккордеона?

Добавьте класс .accordion-button-no-arrow к кнопке аккордеона:

<button class="accordion-button accordion-button-no-arrow" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
  Accordion Item #2
</button>

Как добавить пользовательские иконки вместо стрелок?

Вставьте иконку внутри кнопки аккордеона, например:

<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  <i class="fas fa-plus"></i> Accordion Item #3
</button>

Как сделать аккордеон с плавным переходом?

Добавьте класс .accordion-fade к контейнеру .accordion.

Как изменить высоту блока при раскрытии?

Измените свойство max-height для .accordion-collapse.collapse.

Как добавить кастомные стили к аккордеону?

Создайте свой пользовательский CSS и примените его к классам аккордеона, например:

.my-custom-accordion .accordion-button {
  background-color: #ffcc00;
  color: #333;
}

Затем добавьте класс .my-custom-accordion к контейнеру .accordion.

Заключение

Accordion в Bootstrap 5 - это мощный инструмент для создания интерактивных пользовательских интерфейсов. Используйте его с умом, чтобы сделать ваши веб-приложения более удобными и информативными.

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