1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<div class="fr-accordions-group">
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-114">Intitulé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-114">
<!-- données de test -->
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
</ul>
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-115">Intitulé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-115">
<!-- données de test -->
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
</ul>
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-116">Intitulé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-116">
<!-- données de test -->
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
</ul>
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-117">Intitulé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-117">
<!-- données de test -->
<h4 class="fr-h4">Contenu </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="test" target="_blank">link test</a> incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
Par défaut, les accordéons sont fermés et comprennent l’en tête et l’icône “+”.
La totalité de la barre de titre est cliquable. En cliquant sur le titre ou l’icône , le contenu est révélé (l’icône devient “-”) ou caché (l’icône devient “+”).
Pour les développeurs :
L'élement fr-accordion est une implémentation du système de collapse, il peut vivre de manière indépendante dans le code, et ainsi s’ouvrir et se fermer au clic. Il est composé :
d’un bouton doté des attributs
aria-expanded="false" (précisant que le collapse est fermé par défaut)
et aria-controls="accordion-1" pour lier le bouton à l’id du collapse (ici accordion-1).
d’un élément de collapse avec un id unique et la classe .fr-collapse
Un regroupement de ces éléments peut être fait avec un wrapper .fr-accordions-group. Lors de l’ouverture d’un item au sein d’un même groupe, les autres items se fermeront automatiquement.
Il est possible d’utiliser plusieurs groupes au sein d’une même page, et ceux-si fonctionneront de manière totalement indépendante, c’est-à-dire qu’ouvrir un item d’un group fermera les items de ce même groupe, sans interagir sur les groupes annexes de la page. Pour cela il faut s’assurer que chaque id de collapse est unique.
Règles d’utilisation
Usages
Les accordéons servent à économiser de l'espace sur de longues pages. Ils permettent ainsi :
d'alléger des pages de contenus denses en permettant aux utilisateurs de consulter uniquement ce dont ils ont besoin.
de guider les utilisateurs dans des parcours complexes
Ne pas utiliser les accordéons dans des contextes où les utilisateurs ont besoin de lire tout 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.
Il faut néanmoins prendre soin que les niveaux de titre de chaque section de l'accordéon soient cohérents avec le titrage de la page.
Contenus
Les titres des en-têtes doivent être brefs et explicites sur le contenu proposé par l’accordéon.
A l’intérieur de l’accordéons, il est possible d’ajouter tout type de contenu selon vos besoins.
Personnalisation
Ce composant n’est pas personnalisable.
Besoin d’aide ?
L'équipe du DSFR est là pour vous aider. Retrouvez-la sur :
la communauté slackpour poser vos questions, et échanger avec d’autres utilisateurs. Vous êtes agent de l’État et souhaitez accéder au slack ? Rejoignez la communauté dès maintenant !