Как сделать кнопку переключения collapse блоков в bootstrap4?

В Bootstrap 4 есть встроенная функциональность для создания кнопки переключения collapse блоков. Для этого нужно использовать следующие классы и атрибуты:

1. Оберните кнопку и блок, который нужно сворачивать/разворачивать, в элемент <div> с классом collapse.

<div class="collapse" id="collapseExample">
  <!-- ваш контент -->
</div>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Кнопка переключения
</button>

2. Добавьте класс collapse к блоку, который нужно сворачивать/разворачивать. Также присвойте блоку уникальный id.

<div class="collapse" id="collapseExample">
  <!-- ваш контент -->
</div>

3. Добавьте атрибут data-toggle="collapse" и data-target="#collapseExample" к кнопке, чтобы установить связь с сворачиваемым блоком. Также используйте атрибуты aria-expanded="false" и aria-controls="collapseExample" для доступности.

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Кнопка переключения
</button>

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

Вы также можете настроить различные варианты анимации, длительность и эффекты при помощи классов collapse, collapsing и collapse-<направление>, что позволяет создать плавное появление/исчезновение блока.

Таким образом, использование классов collapse, атрибутов data-toggle и data-target вместе с подходящей разметкой позволяет легко создать кнопку переключения collapse блоков в Bootstrap 4.