Bootstrap 4 zusammenbrechen
Einfach zusammenklappbar
Collapsibles sind nützlich, wenn Sie große Mengen an Inhalten ausblenden und anzeigen möchten:
Beispiel
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Beispiel erklärt
Die .collapseKlasse gibt ein zusammenklappbares Element an (in unserem Beispiel ein <div>); Dies ist der Inhalt, der mit einem Klick auf eine Schaltfläche angezeigt oder ausgeblendet wird.
Um den reduzierbaren Inhalt zu steuern (ein-/auszublenden), fügen Sie das data-toggle="collapse"Attribut zu einem <a>- oder <button>-Element hinzu. Fügen Sie dann das data-target="#id"Attribut hinzu, um die Schaltfläche mit dem reduzierbaren Inhalt zu verbinden (<div id="demo">).
Hinweis: Für <a>-Elemente können Sie das hrefAttribut anstelle des data-target
Attributs verwenden:
Beispiel
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Standardmäßig ist der reduzierbare Inhalt ausgeblendet. Sie können jedoch die .showKlasse hinzufügen, um den Inhalt standardmäßig anzuzeigen:
Beispiel
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Akkordeon
Das folgende Beispiel zeigt ein einfaches Akkordeon durch Erweiterung der Kartenkomponente.
Hinweis: Verwenden Sie das data-parentAttribut, um sicherzustellen, dass alle reduzierbaren Elemente unter dem angegebenen übergeordneten Element geschlossen werden, wenn eines der reduzierbaren Elemente angezeigt wird.
Beispiel
<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>
Vollständige Bootstrap 4 Collapse-Referenz
Eine vollständige Referenz aller Collapse-Optionen, -Methoden und -Ereignisse finden Sie in unserer Bootstrap 4 JS Collapse Reference .