Accordéon - Accordion
Publié le 28/05/2024 | Modifié le 26/11/2024
Les accordéons permettent aux utilisateurs d’afficher et de masquer des sections de contenu présentées dans une page.
Règles d’utilisation
Usages
- Alléger des pages de contenus denses en permettant aux utilisateurs de consulter uniquement ce dont ils ont besoin.
- Guider les utilisateurs dans des parcours complexes.
Ne pas utiliser les accordéons dans des contextes où les utilisateurs ont besoin de lire tous les contenus compris dans les accordéons.
Ne pas utiliser non plus avec un contenu très court. Dans ce cas, utiliser des listes ou des paragraphes.
Contenus
- Le titre doit être bref et explicite sur le contenu proposé par l’accordéon.
- À l’intérieur de l’accordéon, il est possible d’ajouter tout type de contenu selon vos besoins.
Exemple
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<dsfr-accordeon|titre=Intitulé accordéon>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dsfr-accordeon>Paramètres du raccourci <dsfr-accordeon>
| Nom du paramètre | |
|---|---|
| titre | Titre de la section - obligatoire. |
Groupe d’accordéons
Un regroupement d’accordéons peut être fait avec le raccourci <dsfr-groupe_d_accordeons>. Par défaut, lors de l’ouverture d’un accordéon au sein d’un même groupe, les autres accordéons se fermeront automatiquement.
Il est possible d’utiliser plusieurs groupes au sein d’une même page, et ceux-ci fonctionneront de manière totalement indépendante, c’est-à-dire qu’ouvrir un accordéon d’un groupe fermera les autres accordéons de ce même groupe, sans interagir sur les groupes annexes de la page.
Paramètres du raccourci <dsfr-groupe_d_accordeons>
| Nom du paramètre | Valeur par défaut | Valeur(s) autorisée(s) | |
|---|---|---|---|
| fermeture_des_accordeons | automatique | automatique, manuelle | Par défaut le contenu d’un accordéon "ouvert" est automatiquement masqué/fermé lorsque l’utilisateur ouvre un autre accordéon du même groupe d’accordéons. |
Contenu accordéon N°1
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Contenu accordéon N°2
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Contenu accordéon N°3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<dsfr-groupe_d_accordeons>
<dsfr-accordeon|titre=Intitulé accordéon>
{{{*** Contenu accordéon N°1}}}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dsfr-accordeon>
<dsfr-accordeon|titre=Intitulé accordéon>
{{{*** Contenu accordéon N°2}}}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dsfr-accordeon>
<dsfr-accordeon|titre=Intitulé accordéon>
{{{*** Contenu accordéon N°3}}}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dsfr-accordeon>
</dsfr-groupe_d_accordeons>Contenu accordéon N°4
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Contenu accordéon N°5
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Contenu accordéon N°6
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<dsfr-groupe_d_accordeons|fermeture_des_accordeons=manuelle>
<dsfr-accordeon|titre=Intitulé accordéon>
{{{*** Contenu accordéon N°4}}}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dsfr-accordeon>
<dsfr-accordeon|titre=Intitulé accordéon>
{{{*** Contenu accordéon N°5}}}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dsfr-accordeon>
<dsfr-accordeon|titre=Intitulé accordéon>
{{{*** Contenu accordéon N°6}}}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</dsfr-accordeon>
</dsfr-groupe_d_accordeons>