Bootstrap 4 Свернуть
Базовый складной
Складные элементы полезны, когда вы хотите скрыть и показать большое количество контента:
Пример
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Объяснение примера
Класс .collapseуказывает сворачиваемый элемент (в нашем примере <div>); это контент, который будет отображаться или скрываться одним нажатием кнопки.
Чтобы управлять (показывать/скрывать) сворачиваемое содержимое, добавьте data-toggle="collapse"атрибут к элементу <a> или <button>. Затем добавьте data-target="#id"атрибут для соединения кнопки со сворачиваемым содержимым (<div id="demo">).
Примечание. Для элементов <a> вы можете использовать hrefатрибут вместо data-target
атрибута:
Пример
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
По умолчанию сворачиваемое содержимое скрыто. Однако вы можете добавить .showкласс для отображения контента по умолчанию:
Пример
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Аккордеон
В следующем примере показан простой аккордеон, расширяющий компонент карты.
Примечание. Используйте этот data-parentатрибут, чтобы убедиться, что все сворачиваемые элементы под указанным родительским элементом будут закрыты при отображении одного из сворачиваемых элементов.
Пример
<div id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
Полное руководство по сворачиванию Bootstrap 4
Полный справочник по всем параметрам, методам и событиям свертывания см. в нашем Справочнике по сворачиванию Bootstrap 4 JS .