Accordion

Un accordéon est un élément d'interface utilisateur qui permet de masquer ou afficher du contenu en réponse au clic de l'utilisateur sur un panneau en particulier. Il est souvent utilisé pour un système de questions / réponses (FAQ).

Comment l'utiliser

Afin d'utiliser la composante, mettre l'attribut data-component="Accordion" sur l'élément HTML qui contient tous les panneaux.

Identifier les éléments HTML qui représentent les panneaux qui s'ouvrent et se ferment en leur ajoutant la classe .js-header

Classes d'état

Pour l'affichage d'éléments, nous utilisons des classes d'état que vous pouvez utiliser pour apporter des changements au CSS.

IS-ACTIVE

Sur l'élément HTML qui doit être actif, la classe .is-active est ajoutée ou retirée lorsqu'il y a un clic sur le panneau.

Voici un exemple de code CSS pour le changement d'état

Paramètres

Les paramètres permettent d'ajuster des options précises afin de personaliser davantage le comportement de l'accordéon.

DATA-NOT-CLOSING

Ce paramètre vous permet de faire en sorte que la composante ne ferme pas les autres panneaux automatiquement lorsqu'on ouvre un panneau.

Ca paramètre doit être placé sur l'élément HTML qui représente la composante

DATA-AUTO-OPEN

Ce paramètre permet d'avoir un panneau ouvert automatiquement au chargement de la page

Ca paramètre doit être placé sur l'élément HTML qui représente un panneau

De plus, dès qu'il y a plus qu'un (2+) data-auto-open dans une composante, la fermeture automatique est désactivée (comportement identique au paramètre data-not-closing).