Accordéon

L’accordéon est un élément d’interaction avec l’interface permettant à l’usager d'afficher ou de masquer une section de contenu présentée dans une page.

HTML

Structure du composant

Le composant Accordéon est composé de deux parties : son titre qui contient le bouton d'ouverture, et un bloc de contenu libre refermable, dit "collapse". Sa structure est la suivante :

• Le conteneur de l'accordéon est une balise <section> avec la classe fr-accordion.
• Son titre est contenu dans un niveau d'entête <hx>, variable en fonction de sa hiérarchie dans la page (par défaut h3), et possède la classe fr-accordion__title.
• Un <button> est placé dans cette balise <hx>, et son libellé constitue le titre.
  • Le bouton doit être de type "button".
  • Le bouton dispose d'un attribut aria-expanded, sa valeur [true|false] défini si le collapse est ouvert ou fermé
  • Le bouton est lié au collapse via l'attribut aria-controls, sa valeur doit correspondre à l'attribut id du collapse.
• Le bloc refermable, défini par la classe fr-collapse, est une <div> placée après le titre. Il s'agit d'un élément générique du core utilisé par d'autres composants tels que la navigation ou la transcription.
  • Il dispose d'un attribut id obligatoire, pour être lié au bouton d'ouverture.
  • Son contenu est libre, mais nécessite l'utilisation des balises adéquates, il n'est pas correcte de placer du texte directement dans une <div>.

Exemple de structure HTML

<section class="fr-accordion">
    <h3 class="fr-accordion__title">
        <button type="button" class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-1">Libellé accordéon</button>
    </h3>
    <div id="accordion-1" class="fr-collapse">
        <!-- données de l'accordéon -->
    </div>
</section>

Groupe d'accordéons

L'accordéon peut être utilisé en groupe de plusieurs éléments, liés ou non entre eux. Les accordéons sont disposés à la suite dans un conteneur.

• Le conteneur est une <div> défini par la classe fr-accordions-group
• Le conteneur peut posséder un attribut data-fr-group, sa valeur [true|false] permet de lier les accordéons entre eux ou non. Si true, lorsqu'un accordion est ouvert les autres se referment. Si false, il est possible d'en ouvrir plusieurs. Si l'attribut n'est pas défini les accordéons sont groupés par défaut.

Exemple de structure HTML

<div class="fr-accordions-group" data-fr-group="true">
  <section class="fr-accordion">
    ...
  </section>
  <section class="fr-accordion">
    ...
  </section>
</div>

CSS

Installation du CSS

Pour fonctionner correctement le style CSS de l'accordéon et du core doivent être importés. L'import doit se faire avant le contenu de la page dans la partie <head, et de préférence avec le fichier minifié, car plus léger.

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/accordion/accordion.min.css" rel="stylesheet">

NB: Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css

Pour fonctionner sur Internet Explorer 11, un fichier legacy, peut aussi être importé :

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/accordion/accordion.legacy.min.css" rel="stylesheet">

Variante de style

Sur l'accordéon, aucune variation ni accentuation n'est possible.

Quand le JavaScript est activé, le bloc refermable (collapse) reçoit la classe fr-collapse--expanded lorsque le bouton lié possède l'attribut aria-expanded="true". C'est cette classe qui ouvre le collapse.

JavaScript

Pour fonctionner le composant accordéon nécessite l'utilisation de JavaScript.

Installation du JavaScript

Chaque composant utilisant javascript possède un fichier Js spécifique et requiert le fichier Js du core.

Il est donc nécessaire d'importer ces fichiers à la fin de la page (avant </body>) :

<script type="module" src="dist/core/core.module.min.js"></script>
<script type="module" src="dist/component/accordion/accordion.module.min.js"></script>

NB: Il est aussi possible d'importer le Js global du DSFR dsfr.module.js

Pour fonctionner sur Internet Explorer 11, un fichier legacy, en version nomodule ES5, peut aussi être importé :

<script type="text/javascript" nomodule href="dist/legacy/legacy.nomodule.min.js" ></script>
<script type="text/javascript" nomodule src="dist/core/core.nomodule.min.js"></script>
<script type="text/javascript" nomodule src="dist/component/accordion/accordion.nomodule.min.js"></script>

Une fois le JavaScript chargé, le composant fonctionne automatiquement.

Instances

Sur l'accordéon, les éléments suivants sont instanciés :

• Le groupe, via la classe : fr-accordions-group
• L'accordéon, via la classe : fr-accordion
• Le bouton d'ouverture, via la classe fr-accordion__btn
• Le collapse, via la classe fr-collapse

Une fois chargé, le Js ajoute un attribut data-fr-js-NOM_INSTANCE="true" sur chacun des éléments instanciés

API

Il est possible d'interagir avec les instances du composants en JavaScript via une API.

Cette API est disponible depuis la méthode window.dsfr(instance) du core.

Exemple :

const elem = document.getElementById('ID_COLLAPSE');
dsfr(elem).collapse.disclose();

L'ensemble des propriétés et méthodes disponibles sont définies ci-après :

accordion

accordionGroup

accordion

collapseButton

collapse

Événements

Le Système de Design fournit des événements personnalisés pour les actions uniques de la part de certains composants réactifs listés sur la page de l' API Javascript .

Sur l'accordéon et le groupe d'accordéons, les événements suivants sont disponibles :

Note de version

Voir les évolutions sur github