Accordéon

Intro Définition

En bref, un accordéon est un élément qui a été réduit de sorte qu'on ne peut voir que son titre et une flèche descendante. Lorsque l'on clique sur le titre, l'élément se développera afin de révéler le corps du contenu. Si l'on clique une deuxième fois sur le titre, l'élément rétrécira au point de re-masquer le corps du contenu. Les accordéons permettent aux visiteurs de parcourir rapidement les titres qui figurent sur la page, ce qui peut être utile dans certains cas comme des listes de foires aux questions (FAQ).

L'accordéon est donc utilisé en interface web par soucis de permettre à l'utilisateur de parcourir rapidement le contenu et et aussi, simplement pour sauver de l'espace dans la page et éviter les longs blocs de texte infinis.

Voici la base:

Cliquez sur les accordéons ci-dessous pour développer/réduire le contenu de l'accordéon.

<div class="accordion" id="monAccordeon"> <div class="accordion-item"> <h2 class="accordion-header" id="entete1"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1"> Élément #1 de l'accordéon </button> </h2> <div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="entete1" data-bs-parent="#monAccordeon"> <div class="accordion-body"> Ceci est le premier élément du corps de l'accordéon. Il est affiché par défaut, jusqu'à ce que... </div> </div> </div> </div>

Remarquez le lien entre les IDs des éléments et les atributs data-bs-target, aria-controls, aria-labelledby et data-bs-parent

les IDs du code Contenu

Conteneur de l'accordéon

L'élément parent qui contient tout les items de l'accordéon, doit avoir la classe .accordion

Conteneur de chaque item

Ensuite chaque duo titre-contenu, doit être entouré par un élément qui a la classe .accordion-item

Conteneur du titre de l'item

À l'intérieur de chaque accordion-item, il y aura un titre qui fait aussi office de bouton cliquable pour ouvrir et fermer le contenu.

Exemple:

<h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Élément #2 de l'accordéon. </button> </h2>

Portez bien attention sur les attributs ci-haut.

  • data-bs-target="#collapseTwo" et aria-controls="collapseTwo" où collapseTwo correspond au id du contenu qui accompagne ce titre.

Conteneur du contenu de l'item

Et finalement, toujours à l'intérieur de accordion-item, se trouve le contenu lui même.

Exemple:

<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> Ceci est le contenu du 2e élément de... </div> </div>

Portez bien attention sur les attributs ci-haut.

  • data-bs-parent="#accordionExample" où accordionExample correspond au id du parent qui contient tous les items de l'accordéon.
  • aria-labelledby="headingTwo" où headingTwo correspond au id heading (h1, h2, h3 etc) qui accompagne le contenu actuel.

Accordion