Sommaire

Les accordéons

1. Les accordéons classiques

Le composant en accordéon permet d’afficher beaucoup de contenu en peu de place. Chaque volet de l’accordéon va contenir tout le contenu que vous souhaitez et ils vont s’afficher uniquement par action de l’utilisateur. Initialement, vous pourrez fermer tous les volets ou en afficher qu’un seul.

Attention ce composant utilise du JavaScript, veillez à ce que les liaisons vers tous les fichiers soient bien implémentées.

L’accordéon se compose de trois parties :

  • le contenu général, avec une boîte <div>,

  • le titre du volet, avec un élément <a>,

  • le contenu du volet avec une autre boîte <div>.

L’accordéon est inséré dans un élément <ul> ayant notamment la classe .accordion.

Chaque volet de l’accordéon est un élément <li> avec la classe .accordion-item. Si vous souhaitez qu’un accordéon soit ouvert au chargement de la page, ajoutez la classe .is-active.

Les titres des volets sont placés dans un élément <a>. L’attribut href doit cibler l’identifiant du contenu du volet qui sera placé dans un élément <div>.

L’élément <a> doit aussi obligatoirement avoir :

  • l’attribut role="tab",

  • un identifiant unique, id="...",

  • un attribut aria-controls="..." qui prendra comme valeur l’identifiant ...