Accordeon

Introductie

Een accordeon biedt een verticale keuzelijst die je per onderdeel kunt openklappen om meer informatie te tonen.

Snelstart

SCSS importeren:

    
    @use "@minvws/manon/components/accordion";

JavaScript initialiseren:

    
    import "@minvws/manon/js/accordion.js";

Benodigde stappen

  1. Plaats een korte zichtbare tekst binnen een button. Bijvoorbeeld een omschrijvende titel of een vraag. Deze tekst is zichtbaar als de accordeon gesloten is. Zorg ervoor dat de gebruiker op basis van deze tekst kan bepalen of de onderliggende informatie waardevol is.
  2. Geef de button een unieke id en verwijs vanaf de div via een aria-labelledby naar deid van de button ten behoeve van toegankelijkheid.
  3. Groepeer de verborgen content binnen een div.
Aandachtspunten

Standaard is het eerste onderdeel opengeklapt. Dit kan aangepast worden middels het `aria-expanded`-attribuut van de `button`.

Voeg `aria-expanded="false"` toe aan de `button` van het eerste onderdeel om te voorkomen dat het standaard opengeklapt is.

Voeg `aria-expanded="true"` toe aan de `button` van een ander onderdeel om te zorgen dat dat onderdeel standaard opengeklapt is. Let op: dit zorgt ervoor dat het eerste onderdeel niet meer standaard opengeklapt is. Om te zorgen dat het eerste onderdeel óók standaard opengeklapt is, kan je ook daar `aria-expanded="true"` toevoegen.

Voorbeelden

Voorbeeld: ul

Voorbeeld: div

Voorbeeld: section