Accordéon
Contenu
Lorem ipsum dolor sit amet, consectetur adipiscing, link test 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.
- list item
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1040">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1040">
<!-- données de test -->
</div>
</section>
Groupe d‘accordéons
Contenu
Lorem ipsum dolor sit amet, consectetur adipiscing, link test 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.
- list item
- list item niveau 2
Contenu
Lorem ipsum dolor sit amet, consectetur adipiscing, link test 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.
- list item
- list item niveau 2
- list item
Contenu
- list item
- list item
Contenu
Lorem ipsum dolor sit amet, consectetur adipiscing, link test 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.
- list item
Contenu
Lorem ipsum dolor sit amet, consectetur adipiscing, link test 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.
- list item
Contenu
Lorem ipsum dolor sit amet, consectetur adipiscing, link test 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.
- list item
<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-1048">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1048">
<!-- données de test -->
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1049">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1049">
<!-- données de test -->
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1050">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1050">
<!-- données de test -->
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1051">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1051">
<!-- données de test -->
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1052">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1052">
<!-- données de test -->
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1053">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1053">
<!-- données de test -->
</div>
</section>
</div>
Groupe d‘accordéons dissociés
Contenu
Lorem ipsum dolor sit amet, consectetur adipiscing, link test 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.
- list item
- list item
- list item niveau 2
- list item niveau 2
Contenu
- list item
Contenu
- list item
- list item niveau 2
Contenu
- list item
Contenu
Lorem ipsum dolor sit amet, consectetur adipiscing, link test 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.
- list item
Contenu
- list item
<div data-fr-group="false" class="fr-accordions-group">
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1061">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1061">
<!-- données de test -->
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1062">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1062">
<!-- données de test -->
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1063">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1063">
<!-- données de test -->
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1064">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1064">
<!-- données de test -->
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1065">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1065">
<!-- données de test -->
</div>
</section>
<section class="fr-accordion">
<h3 class="fr-accordion__title">
<button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1066">Libellé accordéon</button>
</h3>
<div class="fr-collapse" id="accordion-1066">
<!-- données de test -->
</div>
</section>
</div>