Collapse

Verander de zichtbaarheid van content in je project met een paar classes en onze JavaScript plugins.

Voorbeeld

Klik op de knoppen hieronder om een ander element te tonen en te verbergen via veranderingen in de class:

• .collapse verbergt inhoud
• .collapsing wordt toegepast tijdens overgangen
• .collapse.show toont inhoud

U kunt een link gebruiken met het href attribuut, of een knop met het data-target attribuut. In beide gevallen is de data-toggle="collapse" vereist.

Meerdere doelen

Een <button> of <a> kan meerdere elementen tonen en verbergen meerdere elementen tonen en verbergen door ernaar te verwijzen met een JQuery selector in het href of data-target attribuut.Meerdere <button> of <a> kunnen een element tonen en verbergen als ze er elk naar verwijzen met hun href of data-target attribuut

Accordion voorbeeld

Met behulp van de card component kun je het standaard collapse gedrag uitbreiden om een accordion te maken.

Toegankelijkheid

Zorg ervoor dat u aria-expanded toevoegt aan het besturingselement. Dit attribuut geeft de huidige status van het inklapbare element dat aan het besturingselement is gekoppeld expliciet door aan screenreaders en vergelijkbare ondersteunende technologieën. Als het inklapbare element standaard gesloten is, moet het attribuut op het besturingselement de waarde aria-expanded="false" hebben. Als je het inklapbare element standaard open hebt gezet met de show class, zet dan aria-expanded="true" op het besturingselement. De plugin zal automatisch dit attribuut op de controle gebaseerd op het al dan niet openen of sluiten van het collapsible element (via JavaScript, of omdat de gebruiker een ander controle element heeft getriggerd dat ook gebonden is aan hetzelfde collapsbile element). Als het HTML-element van het besturingselement geen knop is (bijv, een <a> of <div>), moet het attribuut role="button" aan het element worden toegevoegd.

Als uw besturingselement op een enkel inklapbaar element is gericht – d.w.z. het data-target-attribuut wijst naar een id-selector – moet u het aria-controls-attribuut aan het besturingselement toevoegen, dat de id van het inklapbare element bevat. Moderne screenreaders en soortgelijke ondersteunende technologieën maken gebruik van dit attribuut om gebruikers extra snelkoppelingen te bieden om direct naar het inklapbare element zelf te navigeren.

Merk op dat de huidige implementatie van Bootstrap niet de verschillende toetsenbordinteracties dekt die worden beschreven in het WAI-ARIA Authoring Practices 1.1 accordion-patroon – je zult deze zelf moeten opnemen met aangepaste JavaScript.

Gebruik

De inklappingsplugin maakt gebruik van een paar klassen om het zware werk te doen:

• .collapse verbergt de inhoud
• .collapse.show toont de inhoud
• .collapsing wordt toegevoegd als de overgang begint, en verwijderd als hij klaar is

Deze klassen zijn te vinden in _transitions.scss.

Via data-attributen

Je voegt gewoon data-toggle="collapse" en een data-target aan het element toe om automatisch de controle over een of meer collapsible elementen toe te wijzen. Het data-target attribuut accepteert een CSS selector om het inklappen op toe te passen. Zorg ervoor dat je de class collapse toevoegt aan het inklapbare element. Als u wilt dat het standaard open is, voegt u de extra class show toe.

Om een accordeon-achtig groepbeheer aan een inklapbaar gebied toe te voegen, voegt u het data-attribuut data-parent="#selector" toe. Bekijk de demo om dit in actie te zien.

Via JavaScript

Handmatig inschakelen kan met:

$('.collapse').collapse()

Opties

Opties kunnen worden doorgegeven via data-attributen of JavaScript. Voor data-attributen voegt u de naam van de optie toe aan data-, zoals in data-parent="".

Methodes

.collapse(options)

Activeert uw inhoud als een inklapbaar element. Accepteert een optionele optie object.

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

.collapse('toggle')

Schakelt een inklapbaar element naar getoond of verborgen. Keert terug naar de aanroeper voordat het inklapbare element daadwerkelijk is getoond of verborgen (d.w.z. voordat de shown.bs.collapse of hidden.bs.collapse gebeurtenis plaatsvindt).

.collapse('show')

Toont een inklapbaar element. Keert terug naar de aanroeper voordat het inklapbare element daadwerkelijk is getoond (d.w.z. voordat de shown.bs.collapse-gebeurtenis plaatsvindt).

.collapse('hide')

Verbergt een inklapbaar element. Geeft terug aan de aanroeper voordat het opvouwbare element daadwerkelijk is verborgen (d.w.z. voordat de gebeurtenis hidden.bs.collapse optreedt).

.collapse('dispose')

Verwijdert de collapse van een element.

Events

De collapse-klasse van Bootstrap stelt een aantal events beschikbaar om in te haken op de collapse-functionaliteit.

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