Collapse (Deutsch)

Schalten Sie die Sichtbarkeit von Inhalten in Ihrem Projekt mit ein paar Klassen und unseren JavaScript-Plugins um.

Beispiel

Klicken Sie auf die Schaltflächen unten, um ein anderes Element über Klassenänderungen ein- und auszublenden:

• .collapse blendet Inhalte aus
• .collapsing wird bei Übergängen angewendet
• .collapse.show zeigt Inhalt

Sie können einen Link mit dem Attribut href verwenden, oder eine Schaltfläche mit dem data-target-Attribut. In beiden Fällen ist das data-toggle="collapse" erforderlich.

Mehrere Ziele

Ein <button> oder <a> kann mehrere Elemente ein- und ausblenden mehrere Elemente ein- und ausblenden, indem es sie mit einem JQuery-Selektor in seinem href oder data-target-Attribut referenziert.Mehrere <button> oder <a> können ein Element ein- und ausblenden, wenn sie es jeweils mit ihrem href oder data-target Attribut referenzieren

Beispiel für ein Akkordeon

Mit der Kartenkomponente können Sie das Standard-Klappverhalten erweitern, um ein Akkordeon zu erstellen.

Barrierefreiheit

Geben Sie dem Steuerelement ein aria-expanded. Dieses Attribut vermittelt Screenreadern und ähnlichen Hilfstechnologien explizit den aktuellen Zustand des faltbaren Elements, das an das Steuerelement gebunden ist. Wenn das faltbare Element standardmäßig geschlossen ist, sollte das Attribut auf dem Steuerelement den Wert aria-expanded="false" haben. Wenn Sie das zusammenklappbare Element mit der Klasse show standardmäßig geöffnet haben, setzen Sie stattdessen aria-expanded="true" auf das Steuerelement. Das Plugin schaltet dieses Attribut auf dem Steuerelement automatisch um, je nachdem, ob das ausklappbare Element geöffnet oder geschlossen wurde (über JavaScript oder weil der Benutzer ein anderes Steuerelement ausgelöst hat, das ebenfalls an das gleiche ausklappbare Element gebunden ist). Wenn das HTML-Element des Steuerelements keine Schaltfläche ist (z. B., ein <a> oder <div>), sollte das Attribut role="button" zu dem Element hinzugefügt werden.

Wenn Ihr Steuerelement auf ein einzelnes zusammenklappbares Element abzielt – d.h. das data-target-Attribut zeigt auf einen id-Selektor – sollten Sie das aria-controls-Attribut zum Steuerelement hinzufügen, das das id des zusammenklappbaren Elements enthält. Moderne Screenreader und ähnliche assistive Technologien nutzen dieses Attribut, um dem Benutzer zusätzliche Shortcuts zur Verfügung zu stellen, mit denen er direkt zum aufklappbaren Element selbst navigieren kann.

Beachten Sie, dass die aktuelle Implementierung von Bootstrap nicht die verschiedenen Tastaturinteraktionen abdeckt, die in den WAI-ARIA Authoring Practices 1.1 Akkordeon-Pattern beschrieben sind – Sie müssen diese selbst mit benutzerdefiniertem JavaScript einfügen.

Benutzung

Das „collapse“-Plugin verwendet ein paar Klassen, um die schwere Arbeit zu erledigen:

• .collapse blendet den Inhalt aus
• .collapse.show zeigt den Inhalt an
• .collapsing wird hinzugefügt, wenn der Übergang beginnt, und entfernt, wenn er endet

Diese Klassen finden Sie in _transitions.scss.

Über Datenattribute

Fügen Sie dem Element einfach ein data-toggle="collapse" und ein data-target hinzu, um die Kontrolle über ein oder mehrere klappbare Elemente automatisch zuzuweisen. Das Attribut data-target akzeptiert einen CSS-Selektor, auf den das Zusammenklappen angewendet wird. Stellen Sie sicher, dass Sie die Klasse collapse zum zusammenklappbaren Element hinzufügen. Wenn Sie möchten, dass es standardmäßig geöffnet ist, fügen Sie die zusätzliche Klasse show hinzu.

Um eine akkordeonartige Gruppenverwaltung zu einem zusammenklappbaren Bereich hinzuzufügen, fügen Sie das data-Attribut data-parent="#selector" hinzu. Sehen Sie sich die Demo an, um dies in Aktion zu sehen.

Über JavaScript

Manuell aktivieren mit:

$('.collapse').collapse()

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Für Datenattribute hängen Sie den Optionsnamen an data- an, wie in data-parent="".

Methoden

.collapse(options)

Aktiviert Ihren Inhalt als klappbares Element. Akzeptiert eine optionale Option object.

$('#myCollapsible').collapse({ toggle: false})

.collapse('toggle')

Schaltet ein ausklappbares Element auf angezeigt oder versteckt. Kehrt zum Aufrufer zurück, bevor das ausklappbare Element tatsächlich ein- oder ausgeblendet wurde (d.h. bevor das shown.bs.collapse oder hidden.bs.collapse Ereignis eintritt).

.collapse('show')

Zeigt ein ausklappbares Element an. Kehrt zum Aufrufer zurück, bevor das ausklappbare Element tatsächlich angezeigt wurde (d.h. bevor das shown.bs.collapse-Ereignis eintritt).

.collapse('hide')

Blendet ein ausklappbares Element aus. Kehrt zum Aufrufer zurück, bevor das ausklappbare Element tatsächlich ausgeblendet wurde (d.h. bevor das Ereignis hidden.bs.collapse eintritt).

.collapse('dispose')

Lässt ein Element zusammenklappen.

Ereignisse

Die Klasse „collapse“ von Bootstrap stellt ein paar Ereignisse zur Verfügung, um die Funktionalität des Zusammenklappens zu nutzen.

$('#myCollapsible').on('hidden.bs.collapse', function () { // do something…})