Bootstrap Collapse и его использование для создания аккордеона

В этой статье познакомимся с компонентом Collapse, который предназначен для плавного сворачивания и разворачивания контента. А также его использование для создания аккордеона.

Компонент Collapse

Collapse – это компонент, который написан на JavaScript и предназначен для плавного сворачивания и разворачивания содержимого элемента.

Обычно данное действие происходит при нажатии на какой-либо элемент, например <a> или <button>.

Привязка этого действия к элементу выполняется посредством добавления к нему следующих data-атрибутов:

• data-bs-toggle="collapse";
• data-bs-target="#target" или href="#target" (#target - это селектор того элемента, видимостью контента которого нужно управлять, т.е. сворачивать или разворачивать его).

Например:

<!-- Bootstrap v5 -->
<!-- Ссылка для переключения видимости #target -->
<a class="btn btn-primary" data-bs-toggle="collapse" href="#target">Collapse</a>
<a class="btn btn-secondary" data-bs-toggle="collapse" href="#" data-bs-target="#target">Collapse</a>
<!-- Кнопка для переключения видимости #target -->
<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#target">Collapse</button>

<!-- #target -->
<div class="collapse" id="target">
  <div class="card card-body">...</div>
</div>

В Bootstrap v4 или v3 атрибуты data-bs-toggle и data-bs-target указываются без -bs:

<!-- Bootstrap v4 -->
<!-- Ссылка для переключения видимости #target -->
<a class="btn btn-primary" data-toggle="collapse" href="#target">Collapse</a>
<a class="btn btn-secondary" data-toggle="collapse" href="#" data-target="#target">Collapse</a>
<!-- Кнопка для переключения видимости #target -->
<button class="btn btn-success" type="button" data-toggle="collapse" data-target="#target">Collapse</button>

<!-- #target -->
<div class="collapse" id="target">
  <div class="card card-body">...</div>
</div>

Если в data-bs-target (в Bootstrap v3 или v4: data-target) или href указать в качестве селектора, например, класс, то данный элемент при нажатии на него будет одновременно переключать видимость несколько элементов, имеющих него.

<!-- Bootstrap v5 -->
<!-- Ссылка для переключения видимости .target -->
<a class="btn btn-primary" data-bs-toggle="collapse" href="#" data-bs-target=".target">collapse all</a>
<!-- Ссылка для переключения видимости #target-1 -->
<a class="btn btn-secondary" data-bs-toggle="collapse" href="#" data-bs-target="#target-1">collapse #target-1</a>
<!-- Ссылка для переключения видимости #target-2 -->
<a class="btn btn-success" data-bs-toggle="collapse" href="#" data-bs-target="#target-2">collapse #target-2</a>

<!-- #target-1 -->
<div class="collapse target" id="target-1">
  <div class="card card-body">...</div>
</div>
<!-- #target-2 -->
<div class="collapse target" id="target-2">
  <div class="card card-body">...</div>
</div>

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

Компонент Collapse использует несколько классов:

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

Если вы хотите чтобы collapse-элемент по умолчанию был открыт, то дополнительно добавьте к нему класс show:

<!-- collapse-элемент -->
<div class="collapse show" id="target">
  <div class="card card-body">...</div>
</div>

Управление collapse-элементом через JavaScript

Кроме привязки элементов через data-атрибуты, управлять видимостью collapse-элементов можно также с помощью JavaScript.

Пример переключения отображения #target при нажатии на #btn-target с помощью JavaScript:

<!-- Bootstrap v5 -->
<!-- Ссылка для переключения видимости #target -->
<a class="btn btn-primary" id="btn-target">Collapse</a>

<!-- #target -->
<div class="collapse" id="target">
  <div class="card card-body">...</div>
</div>

<script>
  const collapseElem = document.querySelector('#target');
  const collapse = new bootstrap.Collapse(collapseElem, {toggle: false});
  document.querySelector('#btn-target').addEventListener('click', (e) => {
    e.preventDefault();
    // сворачиваем или разворачиваем collapse-элемент
    collapse.toggle();
  });
</script>

Этот пример на Bootstrap 4:

<!-- Bootstrap v4 -->
<!-- Ссылка для переключения видимости #target -->
<a class="btn btn-primary" id="btn-target">Collapse</a>

<!-- #target -->
<div class="collapse" id="target">
  <div class="card card-body">...</div>
</div>

<script>
$('#btn-target').click((e) => {
  e.preventDefault();
  // сворачиваем или разворачиваем collapse-элемент
  $('#target').collapse('toggle');
});
</script>

При активировании контента в качестве collapse-элемента мы можем передать аргументы:

// Bootstrap v5
const collapseElem = document.querySelector('#target');
const collapse = new bootstrap.Collapse(collapseElem, {
  parent: false,
  toggle: true
});

// Bootstrap v4
$('#target').collapse({
  parent: false,
  toggle: true
})

Параметр parent (значение по умолчанию false) позволяет указать родитель. В этом случае при открытии collapse-элемента, все остальные, находящиеся внутри него, будут автоматически закрываться.

<!-- Bootstrap v5 -->
<!-- Ссылки для переключения видимости collapse-элементов -->
<a class="btn btn-primary btn-target" data-target="#target-1">#target-1</a>
<a class="btn btn-primary btn-target" data-target="#target-2">#target-2</a>
<a class="btn btn-primary btn-target" data-target="#target-3">#target-3</a>

<!-- #target-1, #target-2, #target-3 -->
<div id="target-container">
  <div class="row">
    <div class="col">
      <div class="collapse" id="target-1">
        <div class="card card-body">...</div>
      </div>
    </div>
    <div class="col">
      <div class="collapse" id="target-2">
        <div class="card card-body">...</div>
      </div>
    </div>
    <div class="col">
      <div class="collapse" id="target-3">
        <div class="card card-body">...</div>
      </div>
    </div>
  </div>
</div>

<script>
const collapseElements = document.querySelectorAll('#target-container .collapse');
collapseElements.forEach(collapseEl => {
  new bootstrap.Collapse(collapseEl, { toggle: false, parent: '#target-container' });
})
document.addEventListener('click', (e) => {
  if (!e.target.dataset.target) {
    return;
  }
  const collapseElement = document.querySelector(e.target.dataset.target);
  const collapse = bootstrap.Collapse.getInstance(collapseElement);
  collapse.toggle();
});
</script>

Этот пример на Bootstrap 4: открыть

Параметр toggle (значение по умолчанию true) позволяет установить необходимо ли переключать collapse-элемент при инициализации.

Эти параметры также можно установить с помощью data-атрибутов. Для этого добавьте перед именем параметра data-. Например: data-parent="#target-container", data-toggle="false".

<div class="collapse" data-parent="#target-container" id="target-1">
  ...
</div>

Горизонтальный режим

В Bootstrap 5 компонент Collapse также поддерживает горизонтальный режим сворачивания и разворачивания контента. Осуществляется это посредством добавления класса collapse-horizontal и указания ширины для элемента, непосредственного содержащего контент.

<!-- Bootstrap v5 -->
<!-- toggle #collapse -->
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapse">Collapse</a>
<!-- #collapse с классом collapse-horizontal -->
<div class="collapse collapse-horizontal" id="collapse">
  <!-- ширина: 300px -->
  <div class="card card-body" style="width: 300px;">...</div>
</div>

Методы компонента Collapse

Компонент Collapse имеет следующие методы:

• toggle – скрывает или отображает контент;
• show – показывает контент;
• hide – скрывает контент;
• dispose – уничтожает collapse-элемент (удаляет данные сохраненные в DOM элементе);
• getInstance (только в Bootstrap v5) – статический метод, который позволяет вам получить экземпляр Collapse, связанный с DOM-элементом;
• getOrCreateInstance (только в Bootstrap v5) – статический метод, который возвращает экземпляр Collapse, связанный с DOM-элементом, или создает новый, если этот элемент не был инициализирован как Collapse.

Использование методов для управления collapse-элементом:

<!-- Bootstrap 5 -->
<a class="btn btn-primary btn-toggle">toggle</a>
<a class="btn btn-primary btn-show">show</a>
<a class="btn btn-primary btn-hide">hide</a>
<!-- collapse-элемент -->
<div class="collapse" id="target">
  <div class="card card-body">...</div>
</div>

<script>
  const btnToggle = document.querySelector('.btn-toggle');
  const btnShow = document.querySelector('.btn-show');
  const btnHide = document.querySelector('.btn-hide');
  const collapseElement = document.querySelector('#target');
  const collapse = new bootstrap.Collapse(collapseElement, { toggle: false });
  btnToggle.addEventListener('click', (e) => {
    e.preventDefault();
    collapse.toggle();
  });
  btnShow.addEventListener('click', (e) => {
    e.preventDefault();
    collapse.show();
  });
  btnHide.addEventListener('click', (e) => {
    e.preventDefault();
    collapse.hide();
  });
</script>

Этот пример на Bootstrap 4:

<!-- Bootstrap 4 -->
<a class="btn btn-primary btn-toggle">toggle</a>
<a class="btn btn-primary btn-show">show</a>
<a class="btn btn-primary btn-hide">hide</a>
<!-- collapse-элемент -->
<div class="collapse" id="target">
  <div class="card card-body">...</div>
</div>

<script>
  $('#target').collapse({ toggle: false });
  $('.btn-toggle').click(e => {
    e.preventDefault();
    $('#target').collapse('toggle');
  });
  $('.btn-show').click(e => {
    e.preventDefault();
    $('#target').collapse('show');
  });
  $('.btn-hide').click(e => {
    e.preventDefault();
    $('#target').collapse('hide');
  });
</script>

Методы Bootstrap 5 getInstance и getOrCreateInstance предназначены для получения экземпляра bootstrap.Collapse. Кроме этого, последний метод ещё выполняет создание экземпляра bootstrap.Collapse, если он не создан для указанного элемента.

Пример, в котором будем переключать видимость collapse-элементов каждые 5 секунд. Получать экземпляры bootstrap.Collapse, связанные с указанными элементами, будем с помощью указанных выше методов.

<!-- Bootstrap 5 -->
<div class="collapse" id="collapse-1">...</div>
<div class="collapse" id="collapse-2">...</div>

<script>
  // создадим bootstrap.Collapse связанный с #collapse-1
  new bootstrap.Collapse(document.querySelector('#collapse-1'), { toggle: false });

  window.setInterval(() => {
    // получим bootstrap.Collapse связанный с #collapse-1
    const collapse1 = bootstrap.Collapse.getInstance('#collapse-1');
    // переключим видимость #collapse-1
    collapse1.toggle();
    // получим bootstrap.Collapse связанный с #collapse-2 (если его нет, то создадим его)
    const collapse2 = bootstrap.Collapse.getOrCreateInstance('#collapse-2');
    // переключим видимость #collapse-2
    collapse2.toggle();
  }, 5000);
</script>

Этот пример на Bootstrap 4:

<!-- Bootstrap 4 -->
<div class="collapse" id="collapse-1">...</div>
<div class="collapse" id="collapse-2">...</div>

<script>
  // инициализируем #collapse-1 как collapse-элемент
  $('#collpase-1').collapse({ toggle: false });

  window.setInterval(() => {
    // получим collapse-элемент и переключим его видимость
    $('#collapse-1').collapse('toggle');
    // получим collapse-элемент (если он не инициализирован, то инициализируем его как collapse-элемент) и переключим его видимость
    $('#collapse-2').collapse('toggle');
    // переключим видимость #collapse-2
  }, 5000);
</script>

События компонента Collapse

Collapse имеет следующие события:

• show.bs.collapse – срабатывает сразу после вызова метода show (т.е. перед началом разворачивания);
• shown.bs.collapse – генерируется, когда collapse-элемент станет полностью видимым для пользователя (т.е. после того как полностью завершится CSS переход);
• hide.bs.collapse – генерируется сразу после вызова hide (т.е. перед началом сворачивания);
• hidden.bs.collapse – сработает, когда collapse-элемент будет полностью скрыт от пользователя (т.е. после завершения CSS перехода).

Пример, в котором будем добавлять классы к collapse-элементу (а точнее к .card, расположенным в нём) для изменения цвета фона и текста, после того как он будет полностью виден. А перед началом сворачивания будем удалять их.

<!-- Bootstrap 5 -->
<a class="btn btn-primary" href="#" data-bs-toggle="collapse" data-bs-target="#collapse-1">#collapse-1</a>
<div class="collapse mb-3" id="collapse-1">
  <div class="card card-body">...</div>
</div>

<script>
  // получаем элемент #collapse-1
  const collapse = document.querySelector('#collapse-1')
  // после разворачивания (когда содержимое #collapse-1 станет полностью видно)
  collapse.addEventListener('shown.bs.collapse', (e) => {
    const cardEl = e.target.querySelector('.card');
    cardEl.classList.add('bg-primary');
    cardEl.classList.add('text-white');
  });
  // перед началом сворачивания #collapse-1
  collapse.addEventListener('hide.bs.collapse', (e) => {
    const cardEl = e.target.querySelector('.card');
    cardEl.classList.remove('bg-primary');
    cardEl.classList.remove('text-white');
  });
</script>

Этот пример на Bootstrap 4:

<!-- Bootstrap 4 -->
<a class="btn btn-primary" href="#" data--toggle="collapse" data-target="#collapse-1">#collapse-1</a>
<div class="collapse mb-3" id="collapse-1">
  <div class="card card-body">...</div>
</div>

<script>
  const collapse = $('#collapse-1')
  collapse.on('shown.bs.collapse', (e) => {
    const cardEl = $(e.target).find('.card');
    cardEl.addClass('bg-primary text-white');
  });
  collapse.on('hide.bs.collapse', (e) => {
    const cardEl = $(e.target).find('.card');
    cardEl.removeClass('bg-primary text-white');
  });
</script>

Аккордеон

Компонент Accordion в Bootstrap построен на базе компонента Collapse.

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

Пример аккордеона на Bootstrap 5:

<!-- Bootstrap 5 -->
<div class="accordion" id="menu">
  <!-- item-1 -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#item-1">
        Item 1
      </button>
    </h2>
    <!-- класс show делает пункт открытым -->
    <div id="item-1" class="accordion-collapse collapse show" data-bs-parent="#menu">
      <div class="accordion-body">
        Content 1...
      </div>
    </div>
  </div>
  <!-- item-2 -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-2">
        Item 2
      </button>
    </h2>
    <div id="item-2" class="accordion-collapse collapse" data-bs-parent="#menu">
      <div class="accordion-body">
        Content 2...
      </div>
    </div>
  </div>
  ...
</div>

В Accordion collapse-элемент, который должен быть открыт по умолчанию, помечается с помощью класса show.

Реализация этого примера на Bootstrap 4:

<!-- Bootstrap 4 -->
<div class="accordion" id="menu">
  <!-- item-1 -->
  <div class="card">
    <div class="card-header">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#item-1">
          Item 1
        </button>
      </h2>
    </div>
    <!-- класс show делает пункт открытым -->
    <div id="item-1" class="collapse show" data-parent="#menu">
      <div class="card-body">
        Content 1...
      </div>
    </div>
  </div>
  <!-- item-2 -->
  <div class="card">
    <div class="card-header">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#item-2">
          Item 2
        </button>
      </h2>
    </div>
    <div id="item-2" class="collapse" data-parent="#menu">
      <div class="card-body">
        Content 2...
      </div>
    </div>
  </div>
  ...
</div>

Если мы хотим, чтобы при открытии одного collapse-элемента другие сворачивались, нужно их при помощи атрибута data-bs-parent (в Bootstrap v3 и v4: data-parent) привязать к одному родителю:

<!-- Bootstrap 5 -->
<!-- элемент, который выступает в качестве родителя (id="menu") -->
<div class="accordion" id="menu">
  ...
  <div id="item-1" class="accordion-collapse collapse show" data-bs-parent="#menu">
  ...
  <div id="item-2" class="accordion-collapse collapse" data-bs-parent="#menu">
  ...
</div>

<!-- Bootstrap 4 -->
<!-- элемент, который выступает в качестве родителя (id="menu") -->
<div class="accordion" id="menu">
  ...
  <div id="item-1" class="collapse show" data-parent="#menu">
  ...
  <div id="item-2" class="collapse" data-parent="#menu">
  ...
</div>

Если это не нужно, то тогда вышеприведённый пример можно записать так:

<!-- Bootstrap 5 -->
<div class="accordion">
  <!-- item-1 -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#item-1">
        Item 1
      </button>
    </h2>
    <!-- класс show делает пункт открытым -->
    <div id="item-1" class="accordion-collapse collapse show">
      <div class="accordion-body">
        Content 1...
      </div>
    </div>
  </div>
  <!-- item-2 -->
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-2">
        Item 2
      </button>
    </h2>
    <div id="item-2" class="accordion-collapse collapse">
      <div class="accordion-body">
        Content 2...
      </div>
    </div>
  </div>
  ...
</div>

На Bootstrap 4:

<!-- Bootstrap 4 -->
<div class="accordion">
  <!-- item-1 -->
  <div class="card">
    <div class="card-header">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#item-1">
          Item 1
        </button>
      </h2>
    </div>
    <!-- класс show делает пункт открытым -->
    <div id="item-1" class="collapse show">
      <div class="card-body">
        Content 1...
      </div>
    </div>
  </div>
  <!-- item-2 -->
  <div class="card">
    <div class="card-header">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#item-2">
          Item 2
        </button>
      </h2>
    </div>
    <div id="item-2" class="collapse">
      <div class="card-body">
        Content 2...
      </div>
    </div>
  </div>
  ...
</div>

В Bootstrap 5 имеется класс accordion-flush. Если его добавить к accordion то он удалит дефолтный цвет фона, некоторые закругленные углы.

<!-- Bootstrap 5 -->
<div class="accordion accordion-flush" id="menu">
  ...
</div>

Пример кода для динамического создания аккордеона:

<?php
// сервер
$contents = [
  [
    'title' => '...',
    'content' => '...'
  ],
  ...
];

echo json_encode($contents);

<!-- клиент -->
<div class="container py-3"></div>

<script>
  const htmlItem = `<div class="accordion-item">
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-{{index}}">
          {{title}}
        </button>
      </h2>
      <div id="item-{{index}}" class="accordion-collapse collapse" data-bs-parent="#menu">
        <div class="accordion-body">
          {{content}}
        </div>
      </div>
    </div>`;
  const accordionEl = document.createElement('div');
  accordionEl.id = 'menu';
  accordionEl.classList.add('accordion');
  let html = '';
  fetch('/examples/json/get-content.php')
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      data.forEach((item, index) => {
        let itemStr = htmlItem.replace('{{title}}', item['title']);
        itemStr = itemStr.replace('{{content}}', item['content']);
        itemStr = itemStr.replaceAll('{{index}}', index + 1);
        html += itemStr;
      });
      accordionEl.innerHTML = html;
      document.querySelector('.container').append(accordionEl);
    });
</script>