Le composant accordéon peut être utilisé pour les cas suivants :
- Organiser des informations connexes.
- Réduire la longueur des pages et éviter le défilement lorsque le contenu n'est pas essentiel à lire en entier.
🚫 Usage incorrect :
Si un utilisateur est susceptible de lire tout le contenu, n'utilisez pas d'accordéons car il pourrait ne pas le remarquer. Nous vous conseillons plutôt dans ce genre de cas, d'utiliser une page de défilement complet avec des en-têtes normaux.
Comportement général
Un accordéon est composé de plusieurs sections, chaque section ayant un en-tête et un contenu associé. Les en-têtes sont généralement des titres ou des libellés, et le contenu peut contenir du texte, des images, des formulaires, etc.
Le composant accordéon ne s'utilise que par groupe et possède au minimum 2 sections.
État initial
Lorsque l'accordéon est chargé pour la première fois, seuls les en-têtes des sections sont visibles, et le contenu réel des sections est masqué.
Interaction utilisateur
Lorsque l'utilisateur clique sur l'en-tête d'une section, deux choses peuvent se produire :
- La section se déploie : le contenu de la section associée devient visible et est généralement animé pour se dérouler en dessous de l'en-tête.
- La section se replie : si la section était déjà ouverte, le clic sur l'en-tête la masque à nouveau, repliant le contenu sous l'en-tête.
Ouverture des panneaux
Par défaut les panneaux de l'accordéon fonctionnent indépendamment les uns des autres. Il est également possible de les configurer pour n'en ouvrir qu'un seul à la fois. Cela signifie que lorsque l'utilisateur ouvre une section, toute autre section ouverte précédemment se referme automatiquement. Cela permet de limiter le contenu affiché à un moment donné, et peut être utile pour économiser de l'espace sur l'interface.
Indication visuelle
Les en-têtes des sections peuvent comporter des indicateurs visuels, tels que des flèches ou des icônes, pour montrer à l'utilisateur si une section est ouverte ou fermée.