Bootstrap 5.2 / Componenten

Accordion

Bouw verticaal inklapbare accordions in combinatie met onze Collapse-JavaScript-plugin.

Hoe het werkt

De accordion gebruikt intern collapse om inklapbaar te zijn. Om een accordion uitgeklapt weer te geven, voeg je de klasse .open toe aan de .accordion.

Let op

Animaties en overgangen houden rekening met de instelling prefers-reduced-motion. Heeft een bezoeker in het besturingssysteem om minder beweging gevraagd, dan vallen overgangen weg.

Voorbeeld

Klik op de accordions hieronder om de accordion-content uit of in te klappen.

HTML

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion-item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Dit is de accordion-body van het eerste item.</strong> Hij wordt standaard getoond, totdat de collapse-plugin de juiste klassen toevoegt waarmee we elk element opmaken. Die klassen bepalen het algehele uiterlijk, evenals het tonen en verbergen via CSS-transities. Je kunt dit allemaal aanpassen met eigen CSS of door onze standaardvariabelen te overschrijven. Het is ook goed om te weten dat vrijwel alle HTML binnen de <code>.accordion-body</code> kan staan, al beperkt de transitie wel de overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion-item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Dit is de accordion-body van het tweede item.</strong> Hij is standaard verborgen, totdat de collapse-plugin de juiste klassen toevoegt waarmee we elk element opmaken. Die klassen bepalen het algehele uiterlijk, evenals het tonen en verbergen via CSS-transities. Je kunt dit allemaal aanpassen met eigen CSS of door onze standaardvariabelen te overschrijven. Het is ook goed om te weten dat vrijwel alle HTML binnen de <code>.accordion-body</code> kan staan, al beperkt de transitie wel de overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion-item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>Dit is de accordion-body van het derde item.</strong> Hij is standaard verborgen, totdat de collapse-plugin de juiste klassen toevoegt waarmee we elk element opmaken. Die klassen bepalen het algehele uiterlijk, evenals het tonen en verbergen via CSS-transities. Je kunt dit allemaal aanpassen met eigen CSS of door onze standaardvariabelen te overschrijven. Het is ook goed om te weten dat vrijwel alle HTML binnen de <code>.accordion-body</code> kan staan, al beperkt de transitie wel de overflow.
      </div>
    </div>
  </div>
</div>

Flush

Voeg .accordion-flush toe om de standaard-background-color, een aantal randen en enkele afgeronde hoeken te verwijderen, zodat accordions van rand tot rand van hun bovenliggende container worden weergegeven.

HTML

<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        Accordion-item #1
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Opvulcontent voor deze accordion, bedoeld om de klasse <code>.accordion-flush</code> te demonstreren. Dit is de accordion-body van het eerste item.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
        Accordion-item #2
      </button>
    </h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Opvulcontent voor deze accordion, bedoeld om de klasse <code>.accordion-flush</code> te demonstreren. Dit is de accordion-body van het tweede item. Stel je voor dat hier echte content in zou staan.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
        Accordion-item #3
      </button>
    </h2>
    <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Opvulcontent voor deze accordion, bedoeld om de klasse <code>.accordion-flush</code> te demonstreren. Dit is de accordion-body van het derde item. Er gebeurt hier qua content niets spannenders, we vullen alleen de ruimte om het er, althans op het eerste gezicht, wat representatiever uit te laten zien voor hoe dit in een echte toepassing zou ogen.</div>
    </div>
  </div>
</div>

Altijd open

Laat het attribuut data-bs-parent op elke .accordion-collapse weg om accordion-items open te laten blijven wanneer er een ander item wordt geopend.

HTML

<div class="accordion" id="accordionPanelsStayOpenExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
        Accordion-item #1
      </button>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
      <div class="accordion-body">
        <strong>Dit is de accordion-body van het eerste item.</strong> Hij wordt standaard getoond, totdat de collapse-plugin de juiste klassen toevoegt waarmee we elk element opmaken. Die klassen bepalen het algehele uiterlijk, evenals het tonen en verbergen via CSS-transities. Je kunt dit allemaal aanpassen met eigen CSS of door onze standaardvariabelen te overschrijven. Het is ook goed om te weten dat vrijwel alle HTML binnen de <code>.accordion-body</code> kan staan, al beperkt de transitie wel de overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
        Accordion-item #2
      </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
      <div class="accordion-body">
        <strong>Dit is de accordion-body van het tweede item.</strong> Hij is standaard verborgen, totdat de collapse-plugin de juiste klassen toevoegt waarmee we elk element opmaken. Die klassen bepalen het algehele uiterlijk, evenals het tonen en verbergen via CSS-transities. Je kunt dit allemaal aanpassen met eigen CSS of door onze standaardvariabelen te overschrijven. Het is ook goed om te weten dat vrijwel alle HTML binnen de <code>.accordion-body</code> kan staan, al beperkt de transitie wel de overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
        Accordion-item #3
      </button>
    </h2>
    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
      <div class="accordion-body">
        <strong>Dit is de accordion-body van het derde item.</strong> Hij is standaard verborgen, totdat de collapse-plugin de juiste klassen toevoegt waarmee we elk element opmaken. Die klassen bepalen het algehele uiterlijk, evenals het tonen en verbergen via CSS-transities. Je kunt dit allemaal aanpassen met eigen CSS of door onze standaardvariabelen te overschrijven. Het is ook goed om te weten dat vrijwel alle HTML binnen de <code>.accordion-body</code> kan staan, al beperkt de transitie wel de overflow.
      </div>
    </div>
  </div>
</div>

Toegankelijkheid

Lees het onderdeel toegankelijkheid van collapse voor meer informatie.

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken accordions nu lokale CSS-variabelen op .accordion, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

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

Sass-variabelen

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