Accordéon - Accordion

Les accordéons permettent aux utilisateurs d’afficher et de masquer des sections de contenu présentés dans une page.

En conformité avec la documentation officielle en bas de page, ce composant :

  • introduit des niveaux de titre : assurez-vous de respecter la hiérarchie de la page ;
  • ne doit pas être utilisé pour du contenu que vos utilisateurs devraient lire ;
  • ne doit pas être utilisé pour un contenu très court : utilisez des listes ou paragraphes.

Accordéon avec trois sections

Les titres title et les contenus sont obligatoires pour les sections. L’attribut id est optionnel et permet de définir une ancre HTML réutilisable. S’il n’est pas passé un id aléatoire sera généré.

Code

= dsfr_accordion do |accordion|
  - accordion.with_section(title: "Un") { tag.p("Premier contenu") }
  - accordion.with_section(title: "Deux", id: "section-deux") { tag.p("Deuxième contenu") }
  - accordion.with_section(title: "Trois", expanded: true) { tag.p("Troisième contenu déplié") }

Résultat

Premier contenu

Deuxième contenu

Troisième contenu déplié 

<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-section-352e2591"
    >
        Un
      </button>
    </h3>
    <div
    id="accordion-section-352e2591"
    class="fr-collapse "
  >
      <p>
        Premier contenu
      </p>
    </div>
  </section>
  <section class="fr-accordion">
    <h3 class="fr-accordion__title">
      <button
        class="fr-accordion__btn"
        aria-expanded="false"
        aria-controls="section-deux"
    >
        Deux
      </button>
    </h3>
    <div
    id="section-deux"
    class="fr-collapse "
  >
      <p>
        Deuxième contenu
      </p>
    </div>
  </section>
  <section class="fr-accordion">
    <h3 class="fr-accordion__title">
      <button
        class="fr-accordion__btn"
        aria-expanded="true"
        aria-controls="accordion-section-4abd8644"
    >
        Trois
      </button>
    </h3>
    <div
    id="accordion-section-4abd8644"
    class="fr-collapse fr-collapse--expanded"
  >
      <p>
        Troisième contenu déplié
      </p>
    </div>
  </section>
</div>

Accordéon avec niveau de titre personnalisé

Si le niveau de titre par défaut (H3) ne vous convient pas, vous pouvez le surcharger en passant l’option starting_header_level.

Code

= dsfr_accordion(starting_header_level: 2) do |accordion|
  - accordion.with_section(title: "Un") { tag.p("Premier contenu") }
  - accordion.with_section(title: "Deux", id: "section-deux") { tag.p("Deuxième contenu") }
  - accordion.with_section(title: "Trois", expanded: true) { tag.p("Troisième contenu déplié") }

Résultat

Premier contenu

Deuxième contenu

Troisième contenu déplié 

<div class="fr-accordions-group">
  <section class="fr-accordion">
    <h2 class="fr-accordion__title">
      <button
        class="fr-accordion__btn"
        aria-expanded="false"
        aria-controls="accordion-section-0fb13222"
    >
        Un
      </button>
    </h2>
    <div
    id="accordion-section-0fb13222"
    class="fr-collapse "
  >
      <p>
        Premier contenu
      </p>
    </div>
  </section>
  <section class="fr-accordion">
    <h2 class="fr-accordion__title">
      <button
        class="fr-accordion__btn"
        aria-expanded="false"
        aria-controls="section-deux"
    >
        Deux
      </button>
    </h2>
    <div
    id="section-deux"
    class="fr-collapse "
  >
      <p>
        Deuxième contenu
      </p>
    </div>
  </section>
  <section class="fr-accordion">
    <h2 class="fr-accordion__title">
      <button
        class="fr-accordion__btn"
        aria-expanded="true"
        aria-controls="accordion-section-ab9276e1"
    >
        Trois
      </button>
    </h2>
    <div
    id="accordion-section-ab9276e1"
    class="fr-collapse fr-collapse--expanded"
  >
      <p>
        Troisième contenu déplié
      </p>
    </div>
  </section>
</div>

Plus d’informations