Accordion
Un accordéon est une liste empilée de headers qui affiche ou masque des contenus associés.
Description
Un accordéon est une liste empilée de headers qui affiche ou masque des contenus associés.
Le module accordéon rend possible l'affichage d'une grande quantité d'informations dans un espace compact grâce à des ouvertures progressive. Le titre de l'en-tête donne un aperçu du contenu permettant de survoler rapidement les titres et de lire la section pertinente.
Plateformes
Anatomie
- Titre : introduit le sujet ou la section à développer.
- Bouton : indique l’état (ouvert ou fermé) et permet d’ouvrir ou fermer le contenu.
- Contenu: informations détaillées liées au titre une fois l’accordéon ouvert.
Usage
Quand l'utiliser ?
Lorsque les utilisateurs n'ont besoin que de quelques éléments clés d'un contenu, en masquant la majeure partie du contenu, les utilisateurs peuvent accorder leur temps efficacement aux sujets pertinents (ex : FAQs, conditions, détails techniques, etc…).
L'accordéon permet également :
- d'organiser un ensemble d'informations
- de réduire la longueur d'une page et son défilement quand le contenu n'est pas crucial à lire dans son ensemble."
Do's and don'ts
-
Do
Un seul panneau peut être ouvert à la fois.
-
Don't
Il est interdit d’ouvrir plusieurs panneaux simultanément.
Anatomie
- Titre : introduit le sujet ou la section à développer.
- Bouton : indique l’état (ouvert ou fermé) et permet d’ouvrir ou fermer le contenu.
- Contenu: informations détaillées liées au titre une fois l’accordéon ouvert.
Usage
Quand l'utiliser ?
Lorsque les utilisateurs n'ont besoin que de quelques éléments clés d'un contenu, en masquant la majeure partie du contenu, les utilisateurs peuvent accorder leur temps efficacement aux sujets pertinents (ex : FAQs, conditions, détails techniques, etc…).
L'accordéon permet également :
- d'organiser un ensemble d'informations
- de réduire la longueur d'une page et son défilement quand le contenu n'est pas crucial à lire dans son ensemble."
Do's and don'ts
-
Do
Un seul panneau peut être ouvert à la fois.
-
Don't
Il est interdit d’ouvrir plusieurs panneaux simultanément.
Changelog
| Date | Changements |
|---|---|
| 04/09/2025 | Ajout d'une troisième entrée |
| 11/10/2025 | Ajout de la description |
| 27/09/2025 | Initialisation du composant |
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.