Collapse - сворачивание содержимого

Можно легко добавить сворачиваемое содержимое с помощью .collapse и связанных классов. Вы можете сделать своё содержимое сворачиваемым, добавив data-toggle="collapse" к кнопке или ссылке, которая указывает на идентификатор содержимого для сворачивания.

Переключайте видимость контента в вашем проекте несколькими классами:

.collapse скрывает содержимое
.collapse.show показывает содержимое

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

Используйте элемент <a>, у которого значение href задано как идентификатор сворачиваемого содержимого. В контейнер сворачиваемого содержимого добавьте класс .collapse и обязательно задайте для него идентификатор.

<h2>Сворачивание по ссылке</h2>
  <a href="#demo" class="btn btn-primary" data-toggle="collapse">Ссылка</a>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

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

Используйте атрибут data-target со значением идентификатора сворачиваемого содержимого. В контейнер сворачиваемого содержимого добавьте класс .collapse и обязательно задайте для него идентификатор.

<h2>Сворачивание по кнопке</h2>
  <p>Нажмите на эту кнопку для сворачивания</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo1">Кнопка</button>
  <div id="demo1" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

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

Кнопки и ссылки <button> и <a> могут показывать и прятать сразу несколько элементов, обращаясь к их атрибутам href или data-target через селектор jQuery. Несколько <button> или <a> могут показывать или прятать один элемент, если каждый из них обращается к элементу через свои атрибуты href или data-target.

<h2>Множественное сворачиване</h2>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo3">Кнопка 1</button>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo4">Кнопка 2</button>
  <a href=".multi-demo" class="btn btn-primary" data-toggle="collapse">Мульти ссылка</a>
  <div id="demo3" class="collapse multi-demo">
    1) Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div id="demo4" class="collapse multi-demo">
    2) Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

Аккордеон - разворачиваемые панели

Сворачиваемое содержимое часто используется для создания «аккордеона», популярного для часто задаваемых вопросов, обзоров продуктов и др. Вы можете использовать карточки Bootstrap для оформления аккордеона, как показано ниже.

Добавьте класс .show к сворачиваемому содержимому, чтобы оно раскрывалось при загрузке страницы.

<h2>Аккордеон</h2>
  <p><strong>Замечание:</strong> Используйте атрибут <strong>data-parent</strong>, чтобы при разворачивании одного из дочерних элементов, все остальные дочерние элементы сворачивались.</p>
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          Сворачиваемый блок 1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Сворачиваемый блок 2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
          Сворачиваемый блок 3
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>

Замечание: Используйте атрибут data-parent, чтобы при разворачивании одного из дочерних элементов, все остальные дочерние элементы сворачивались.