Bootstrap 4 Collapse
Базовый складной
Складные удобно использовать, когда вы хотите, чтобы скрыть и показать большой объем содержимого:
Пример
<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.