Collapse

Hoe het werkt

De collapse-JavaScript-plugin wordt gebruikt om content te tonen en te verbergen. Knoppen of ankers dienen als triggers die aan specifieke elementen gekoppeld zijn die je schakelt. Bij het inklappen van een element wordt de height geanimeerd van de huidige waarde naar 0. Vanwege de manier waarop CSS animaties afhandelt, kun je geen padding op een .collapse-element gebruiken. Gebruik de klasse in plaats daarvan op een apart omhullend element.

Voorbeeld

Klik op de knoppen hieronder om via klassewijzigingen een ander element te tonen en te verbergen:

• .collapse verbergt content
• .collapsing wordt tijdens transities toegepast
• .collapse.show toont content

Over het algemeen raden we aan een knop met het attribuut data-bs-target te gebruiken. Hoewel het vanuit semantisch oogpunt wordt afgeraden, kun je ook een link met het href-attribuut (en een role="button") gebruiken. In beide gevallen is data-bs-toggle="collapse" verplicht.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link met href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Knop met data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Wat opvulcontent voor het collapse-component. Dit paneel is standaard verborgen, maar wordt getoond wanneer de gebruiker de bijbehorende trigger activeert.
  </div>
</div>

Horizontaal

De collapse-plugin ondersteunt ook horizontaal inklappen. Voeg de modifier-klasse .collapse-horizontal toe om de width in plaats van de height te laten overgaan, en stel een width in op het direct onderliggende element. Schrijf gerust je eigen Sass, gebruik inline stijlen of onze width-utilities.

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Breedte-collapse schakelen
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      Dit is wat opvulcontent voor een horizontale collapse. Hij is standaard verborgen en wordt getoond zodra hij geactiveerd wordt.
    </div>
  </div>
</div>

Meerdere doelen

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

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Eerste element schakelen</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Tweede element schakelen</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 elementen schakelen</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Wat opvulcontent voor het eerste collapse-component van dit multi-collapse-voorbeeld. Dit paneel is standaard verborgen, maar wordt getoond wanneer de gebruiker de bijbehorende trigger activeert.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Wat opvulcontent voor het tweede collapse-component van dit multi-collapse-voorbeeld. Dit paneel is standaard verborgen, maar wordt getoond wanneer de gebruiker de bijbehorende trigger activeert.
      </div>
    </div>
  </div>
</div>

Toegankelijkheid

Voeg aria-expanded toe aan het bedieningselement. Dit attribuut geeft de huidige status van het inklapbare element dat aan het bedieningselement gekoppeld is expliciet door aan schermlezers en vergelijkbare hulptechnologieën. Is het inklapbare element standaard gesloten, dan hoort het attribuut op het bedieningselement de waarde aria-expanded="false" te hebben. Heb je het inklapbare element met de klasse show standaard geopend, zet dan aria-expanded="true" op het bedieningselement. De plugin schakelt dit attribuut op het bedieningselement automatisch, op basis van of het inklapbare element geopend of gesloten is (via JavaScript, of doordat de gebruiker een ander bedieningselement heeft geactiveerd dat aan hetzelfde inklapbare element gekoppeld is). Is het HTML-element van het bedieningselement geen knop (bijv. een <a> of <div>), dan hoort het attribuut role="button" aan het element te worden toegevoegd.

Richt je bedieningselement zich op één inklapbaar element — dat wil zeggen dat het data-bs-target-attribuut naar een id-selector verwijst — voeg dan het attribuut aria-controls toe aan het bedieningselement, met daarin de id van het inklapbare element. Moderne schermlezers en vergelijkbare hulptechnologieën gebruiken dit attribuut om gebruikers extra sneltoetsen te bieden om direct naar het inklapbare element te navigeren.

Let op: de huidige implementatie van Bootstrap dekt de diverse optionele toetsenbordinteracties uit het accordion-patroon van de ARIA Authoring Practices Guide niet af — die moet je zelf met eigen JavaScript toevoegen.

Sass

Variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Klassen

De transitieklassen voor collapse staan in scss/_transitions.scss, omdat ze door meerdere componenten gedeeld worden (collapse en accordion).

Standaardwaarden: zie scss/_transitions.scss in de Bootstrap-broncode.

Gebruik

De collapse-plugin gebruikt een paar klassen om het zware werk te doen:

• .collapse verbergt de content
• .collapse.show toont de content
• .collapsing wordt toegevoegd wanneer de transitie start en verwijderd wanneer die eindigt

Deze klassen staan in _transitions.scss.

Via data-attributen

Voeg gewoon data-bs-toggle="collapse" en een data-bs-target aan het element toe om automatisch de bediening van een of meer inklapbare elementen toe te wijzen. Het attribuut data-bs-target accepteert een CSS-selector om de collapse op toe te passen. Zorg dat je de klasse collapse aan het inklapbare element toevoegt. Wil je dat het standaard open staat, voeg dan de extra klasse show toe.

Om een inklapbaar gebied groepsbeheer als bij een accordion te geven, voeg je het data-attribuut data-bs-parent="#selector" toe. Zie de accordion-pagina voor meer informatie.

Via JavaScript

Handmatig inschakelen met:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Opties

De meeste plugins kun je aanzetten zonder JavaScript te schrijven, puur met een data-bs-*-attribuut als trigger. Al deze data-attributen zijn genamespaced met bs-, zodat ze niet botsen met andere scripts.

Methodes

Activeert je content als inklapbaar element. Accepteert een optioneel options-object.

Je kunt een collapse-instantie maken met de constructor, bijvoorbeeld:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Gebeurtenissen

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

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // doe iets...
})