Retour

Accordéon (accordion)

L'accordéon permet aux utilisateurs d'afficher et de masquer des sections de contenu présentés dans une page.

Documentation

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.

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 niveau 2
    • list item niveau 2
  • list item
  • list item

<section class="fr-accordion">
    <h3 class="fr-accordion__title">
        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-81">Intitulé accordéon</button>
    </h3>
    <div class="fr-collapse" id="accordion-81">
        <!-- 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.

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

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 niveau 2
  • 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
  • list item
  • list item
    • list item niveau 2
    • list item niveau 2
    • 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.

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

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.

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
    • 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.

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

<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-89">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-89">
            <!-- 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-90">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-90">
            <!-- 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-91">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-91">
            <!-- 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-92">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-92">
            <!-- 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-93">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-93">
            <!-- 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-94">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-94">
            <!-- données de test -->
        </div>
    </section>
</div>

Accordéon dans un 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.

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 niveau 2
    • list item niveau 2
  • list item
  • list item

<section class="fr-accordion">
    <h3 class="fr-accordion__title">
        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-98">Intitulé accordéon</button>
    </h3>
    <div class="fr-collapse" id="accordion-98">
        <section class="fr-accordion">
            <h3 class="fr-accordion__title">
                <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-99">Intitulé accordéon</button>
            </h3>
            <div class="fr-collapse" id="accordion-99">
                <!-- données de test -->
            </div>
        </section>
    </div>
</section>

Groupes d‘accordéons dans des groupes 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
    • list item niveau 2
    • 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
    • list item niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • 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.

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

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
    • list item niveau 2
  • 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
  • list item
    • list item niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2
    • 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.

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 niveau 2
  • 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.

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

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.

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
    • list item niveau 2
    • list item niveau 2
    • 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.

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
    • list item niveau 2
    • list item niveau 2
    • 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 niveau 2
  • 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.

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 niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2
    • 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.

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

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 niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • 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.

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 niveau 2
  • list item
  • list item
    • list item niveau 2
    • 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 niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • 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.

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 niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2
  • 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
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • 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
  • list item
    • list item niveau 2
    • 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

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.

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 niveau 2
  • list item
  • list item
    • list item niveau 2
    • 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 niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2
    • 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 niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • 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
  • list item
    • list item niveau 2
    • 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.

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 niveau 2
    • list item niveau 2
  • 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
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • 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.

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

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
    • list item niveau 2
    • list item niveau 2
    • 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.

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
    • list item niveau 2
    • 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
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • 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
    • list item niveau 2
    • list item niveau 2
  • 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.

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 niveau 2
  • 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
    • list item niveau 2
    • list item niveau 2
    • list item niveau 2
  • list item
  • list item
    • list item niveau 2
    • 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 niveau 2
    • list item niveau 2
  • list item
    • list item niveau 2
    • 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 niveau 2
  • 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
  • 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.

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
    • list item niveau 2
  • 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-149">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-149">
            <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-143">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-143">
                        <!-- 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-144">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-144">
                        <!-- 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-145">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-145">
                        <!-- 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-146">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-146">
                        <!-- 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-147">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-147">
                        <!-- 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-148">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-148">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="fr-accordion">
        <h3 class="fr-accordion__title">
            <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-156">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-156">
            <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-150">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-150">
                        <!-- 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-151">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-151">
                        <!-- 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-152">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-152">
                        <!-- 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-153">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-153">
                        <!-- 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-154">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-154">
                        <!-- 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-155">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-155">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="fr-accordion">
        <h3 class="fr-accordion__title">
            <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-163">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-163">
            <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-157">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-157">
                        <!-- 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-158">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-158">
                        <!-- 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-159">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-159">
                        <!-- 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-160">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-160">
                        <!-- 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-161">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-161">
                        <!-- 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-162">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-162">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="fr-accordion">
        <h3 class="fr-accordion__title">
            <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-170">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-170">
            <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-164">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-164">
                        <!-- 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-165">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-165">
                        <!-- 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-166">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-166">
                        <!-- 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-167">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-167">
                        <!-- 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-168">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-168">
                        <!-- 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-169">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-169">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="fr-accordion">
        <h3 class="fr-accordion__title">
            <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-177">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-177">
            <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-171">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-171">
                        <!-- 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-172">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-172">
                        <!-- 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-173">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-173">
                        <!-- 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-174">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-174">
                        <!-- 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-175">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-175">
                        <!-- 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-176">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-176">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
    <section class="fr-accordion">
        <h3 class="fr-accordion__title">
            <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-184">Intitulé accordéon</button>
        </h3>
        <div class="fr-collapse" id="accordion-184">
            <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-178">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-178">
                        <!-- 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-179">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-179">
                        <!-- 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-180">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-180">
                        <!-- 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-181">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-181">
                        <!-- 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-182">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-182">
                        <!-- 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-183">Intitulé accordéon</button>
                    </h3>
                    <div class="fr-collapse" id="accordion-183">
                        <!-- données de test -->
                    </div>
                </section>
            </div>
        </div>
    </section>
</div>

Système d’onglets dans un accordéon

Contenu 1

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.

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 2

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

<section class="fr-accordion">
    <h3 class="fr-accordion__title">
        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-189">Intitulé accordéon</button>
    </h3>
    <div class="fr-collapse" id="accordion-189">
        <div class="fr-tabs">
            <ul class="fr-tabs__list" role="tablist" aria-label="[A modifier | nom du système d'onglet]">
                <li role="presentation">
                    <button id="tabpanel-190" class="fr-tabs__tab" tabindex="0" role="tab" aria-selected="true" aria-controls="tabpanel-190-panel">Label Tab 1</button>
                </li>
                <li role="presentation">
                    <button id="tabpanel-191" class="fr-tabs__tab" tabindex="-1" role="tab" aria-selected="false" aria-controls="tabpanel-191-panel">Label Tab 2</button>
                </li>
            </ul>
            <div id="tabpanel-190-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-190" tabindex="0">
                <!-- données de test -->
            </div>
            <div id="tabpanel-191-panel" class="fr-tabs__panel" role="tabpanel" aria-labelledby="tabpanel-191" tabindex="0">
                <!-- données de test -->
            </div>
        </div>
    </div>
</section>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.