Bootstrap - Collapse: Ein umfassender Leitfaden für Anfänger

Hallo, ambitionierte Web-Entwickler! Heute tauchen wir in eines der nützlichsten Komponenten von Bootstrap ein: den Collapse. Stellen Sie es sich wie einen Zaubertrick für Ihre Webseiten vor - jetzt sehen Sie es, jetzt nicht! Lassen Sie uns gemeinsam auf diese aufregende Reise gehen.

Was ist Bootstrap Collapse?

Bevor wir uns dem Code zuwenden, lassen Sie uns verstehen, was es mit dem Collapse auf sich hat. Stellen Sie sich vor, Sie haben einen langen Artikel auf Ihrer Webseite, aber Sie möchten Ihre Besucher nicht mit all dem Text auf einmal überfordern. Genau hier kommt der Collapse zur Rettung! Er ermöglicht es Ihnen, Inhalte mit einem einfachen Klick zu verstecken und anzuzeigen, was Ihre Webseiten interaktiver und benutzerfreundlicher macht.

Grundlegendes Beispiel

Lassen Sie uns mit einem grundlegenden Beispiel anfangen, um einen ersten Eindruck zu bekommen.

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Klicken Sie mich, um ein Geheimnis zu enthüllen!
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Das Geheimnis ist... dass Sie großartig sind, weil Sie Bootstrap lernen!
</div>
</div>

Lassen Sie uns das auseinandernehmen:

1. Wir haben eine Schaltfläche (als Link gestaltet), die den Collapse auslöst.
2. Das data-bs-toggle="collapse"-Attribut tells Bootstrap, dass dieses Element eine kollabierende Fläche steuert.
3. Das href="#collapseExample"-Attribut verweist auf die ID des kollabierenden Inhalts.
4. Der kollabierende Inhalt ist in einem div mit der Klasse collapse und einer ID, die auf den href in der Schaltfläche verweist.

Wenn Sie auf die Schaltfläche klicken, passiert Bootstrap's JavaScript-Zauber, und voilà! Ihr Inhalt erscheint oder verschwindet.

Horizontale Collapse

Nun, lassen Sie uns mit einer horizontalen Collapse das Ganze aufpeppen. Es ist, als ob Ihr Inhalt Versteckspiel spielt, aber in die Breite!

<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Breiten-Collapse umschalten
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
Dies ist einige Platzhalter-Inhalte für eine horizontale Collapse. Es ist standardmäßig versteckt und wird angezeigt, wenn es ausgelöst wird.
</div>
</div>
</div>

Die wichtigsten Unterschiede hier sind:

1. Wir verwenden die Klasse collapse-horizontal zusätzlich zu collapse.
2. Wir haben eine spezifische Breite für den kollabierenden Inhalt festgelegt.
3. Das äußerste div mit min-height stellt sicher, dass andere Elemente nicht springen, wenn die Collapse umgeschaltet wird.

Mehrere Schalter und Ziele

Nun, lassen Sie uns eine Symphonie von kollabierenden Elementen schaffen! Wir können mehrere Schaltflächen steuern, die verschiedene (oder die gleichen) kollabierenden Bereiche steuern.

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Erstes Element umschalten</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Zweites Element umschalten</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Beide Elemente umschalten</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Einige Platzhalter-Inhalte für das erste Collapse-Komponente dieses Multi-Collapse-Beispiels.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Einige Platzhalter-Inhalte für das zweite Collapse-Komponente dieses Multi-Collapse-Beispiels.
</div>
</div>
</div>
</div>

Hier ist, was passiert:

1. Wir haben drei Schaltflächen: zwei steuern individuelle Collapses, und eine steuert beide.
2. Die dritte Schaltfläche verwendet .multi-collapse, um beide kollabierenden Bereiche zu zielieren.
3. Jeder kollabierende Bereich hat sowohl eine eindeutige ID als auch die Klasse multi-collapse.

Barrierefreiheit

Als verantwortungsbewusste Entwickler müssen wir sicherstellen, dass unsere Websites für jeden zugänglich sind. Bootstrap's Collapse-Komponente verfügt über integrierte Barrierefreiheitsfunktionen, aber wir können sie erweitern:

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#accessibleCollapse" aria-expanded="false" aria-controls="accessibleCollapse">
Barrierefreie Collapse-Schaltfläche
</button>

<div class="collapse" id="accessibleCollapse">
<div class="card card-body">
Dieser Inhalt ist versteckt, aber für Screenreader zugänglich.
</div>
</div>

Wichtige Barrierefreiheitsfunktionen:

1. Das aria-expanded-Attribut informiert Screenreader darüber, ob der kollabierende Inhalt derzeit sichtbar ist.
2. Das aria-controls-Attribut verbindet die Schaltfläche mit dem kollabierenden Inhalt.

Methoden-Tabelle

Hier ist eine praktische Tabelle der Collapse-Methoden, die Sie in Ihrem JavaScript verwenden können:

Methode	Beschreibung
collapse('toggle')	Schaltet ein kollabierbares Element um
collapse('show')	Zeigt ein kollabierbares Element an
collapse('hide')	Versteckt ein kollabierbares Element
collapse('dispose')	Zerstört die Collapse-Funktion eines Elements

Um diese Methoden zu verwenden, würden Sie etwas wie folgt tun:

var myCollapsible = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapsible, {
toggle: false
})
bsCollapse.show()

Und da haben Sie es, Leute! Sie haben die Kunst des Bootstrap Collapse gemeistert. Erinnern Sie sich daran, Übung macht den Meister, also fürchten Sie sich nicht, mit diesen Beispielen zu experimentieren. Bevor Sie es wissen, werden Sie Webseiten erstellen, die sich wie Origami falten und entfalten!

Frohes Coden und möge Ihre Collapses stets glatt und Ihre Umschaltungen stets reaktionsschnell sein!

Credits: Image by storyset