Bootstrap Collapse: создание спойлеров с JS

Плагин JS Collapse позволяет создавать спойлеры — открывающиеся и закрывающиеся блоки. Для работы необходим jQuery, подключаемый до Bootstrap.

Создание простого спойлера

Создадим кнопку и блок с содержимым. Кнопка — ссылка (<button type="button" class="btn btn-link">) с атрибутами:

• data-toggle="collapse": указывает на использование плагина Collapse.
• data-target="#collapseExample": указывает ID блока, который будет скрываться/раскрываться.

<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseExample">
  JS Collapse
</button>

Блок создадим с помощью <div>:

• id="collapseExample": ID блока, соответствующий значению data-target.
• class="collapse": ключевой класс Bootstrap для управляемых коллапсов.

<div id="collapseExample" class="collapse">
  <div class="card card-body">
    Скрытый текст
  </div>
</div>

По умолчанию блок скрыт. При нажатии на кнопку он раскрывается и сворачивается.

Настройка начального состояния

Для изначального открытия блока, добавьте класс in к элементу collapse:

<div id="collapseExample" class="collapse in">
  <div class="card card-body">
    Скрытый текст
  </div>
</div>

После загрузки страницы блок будет открыт.

Использование разных тегов

Атрибут data-target применим к любым тегам. В случае использования <a> (ссылка), data-target можно заменить на href:

<a href="#collapseExample" data-toggle="collapse">Ссылка</a>
<div id="collapseExample" class="collapse">
  <div class="card card-body">
    Скрытый текст
  </div>
</div>

Результат аналогичен использованию кнопки.

Группировка коллапсов

Для автоматического сворачивания элементов в группе используется атрибут data-parent. Пример группы из нескольких панелей:

<div id="accordionExample" class="panel-group">
  <div class="panel panel-info">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="#collapseOne" data-toggle="collapse" data-parent="#accordionExample">Panel 1</a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Some text
      </div>
    </div>
  </div>
  <div class="panel panel-danger">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordionExample">Panel 2</a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Some text
      </div>
    </div>
  </div>
</div>

data-parent="#accordionExample" указывает, что элементы внутри блока с ID accordionExample будут сворачиваться при раскрытии другого элемента в группе. Удобно для создания секции «вопросы и ответы».

JS Collapse — простой и мощный инструмент Bootstrap для создания интерактивных блоков. Атрибуты data-toggle, data-target и data-parent позволяют гибко управлять отображением содержимого.