Ga naar hoofdinhoud

Accordion

Zie ook​

Dit component bestaat in 3 varianten:

Een Accordion is een lijst met uitklapbare titels. Gebruikers kunnen hiermee delen van content in- en uitklappen. Doordat alleen de titels zichtbaar zijn ziet de gebruiker snel wat belangrijk is om te lezen.

Wanneer te gebruiken​

Gebruik een accordion bij lange pagina's met veel content om scrollen te verminderen. De titels vormen voor de gebruiker een informatiestructuur die makkelijk te overzien is. Ook wordt een pagina makkelijker leesbaar als je delen van de content kunt verbergen.

In sommige gevallen is een accordion beter dan anchors omdat de informatiestructuur behouden blijft. Accordions zijn ook beter bij mobiele weergave, waar de ruimte op de pagina beperkt is.

Wanneer niet te gebruiken​

Gebruik een accordion niet als alle content zichtbaar moet zijn om vragen van gebruikers te beantwoorden. De relevantie van de content is dan belangrijker dan de totale lengte van de pagina.

Hoe te gebruiken​

Zorg dat de gebruiker meerdere delen tegelijk kan openen. De delen van een accordion hebben twee verschillende posities: ingeklapt en uitgeklapt. De posities zijn af te lezen aan de chevron. Wijst de chevron naar beneden, dan is de accordion ingeklapt. Wijst de chevron naar boven, dan is de accordion uitgeklapt. De accordion kan ook genest gebruikt worden.

Varianten​

Default​

Compact​

Conclusie​

Bronvermelding​