Accordéon

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

Accordéon section unique

Vous pouvez aussi utiliser le helper dsfr_accordion avec une unique section. La section sera alors wrappée par une div fr-accordions-group invisible.

Code

= dsfr_accordion_section(title: "Un") { tag.p("Premier contenu") }

Résultat

Premier contenu 

<section class="fr-accordion">
  <h3 class="fr-accordion__title">
    <button
      class="fr-accordion__btn"
      aria-expanded="false"
      aria-controls="accordion-section-457d7c25"
    >
      Un
    </button>
  </h3>
  <div
    id="accordion-section-457d7c25"
    class="fr-collapse "
  >
    <p>
      Premier contenu
    </p>
  </div>
</section>

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.section(title: "Un") { tag.p("Premier contenu") }
  - accordion.section(title: "Deux", id: "section-deux") { tag.p("Deuxième contenu") }
  - accordion.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-222ccada"
    >
        Un
      </button>
    </h3>
    <div
    id="accordion-section-222ccada"
    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-2fed43cc"
    >
        Trois
      </button>
    </h3>
    <div
    id="accordion-section-2fed43cc"
    class="fr-collapse fr-collapse--expanded"
  >
      <p>
        Troisième contenu déplié
      </p>
    </div>
  </section>
</div>

Plus d’informations