Accordéon

Un accordéon JavaScript est un élément d'interface utilisateur qui permet de masquer ou afficher du contenu en réponse à l'interaction de l'utilisateur avec une zone de titre.

Comment l'utiliser

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

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

Pour que les styles soient bien appliqués, il faut importer la page de style de base du composant.

Classes d'états

Pour les animations et l'affichage d'élément nous utilisons des classes d'état que vous pouvez utiliser pour faire des changements CSS

IS-ACTIVE

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

Voici un exemple de code SCSS 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 lorsqu'on ouvvre un panneau.

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

DATA-AUTO-OPEN

Ce paramètre vous permet de faire en sorte qu'un panneau s'ouvre automatique par défaut.

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

La composante Accordion gère automatiquement que si plusieurs panneaux ont l'attribut data-auto-open, on ne ferme plus les autres questions lorsqu'on ouvre un panneau

Comment l'utiliser en dehors de domComp

À l'intérieur d'un fichier JavaScript, importez la classe `Accordion` que vous aurez préalablement intégré à votre projet.

Dans l'exemple ci-dessus, element est égal au HTMLElement qui l'attribut data-component="Carousel"