2.1.2. Accordéons (plier/déplier)

Principe

Les accordéons sont des modules dynamiques qui permettent d’optimiser l’affichage du contenu d’une page, dans un espace réduit. Ils utilisent un système de “plier/déplier”, contrôlable par l’utilisateur, souvent au clic sur un titre ou un lien qui surplombent le bloc de contenu.

Code HTML de base

Le code HTML de base pour un accordéon dont les panneaux sont masqués par défaut peut par exemple être le suivant. Ce code est à adapter au contexte, notamment pour ce qui a trait aux niveaux de titres.

<h1>Titre associé au premier panneau</h1>
<div id="panneau-1">
    <p>Contenu du premier panneau</p>
</div>
 
<h1>Titre associé au deuxième panneau</h1>
<div id="panneau-2">
    <p>Contenu du deuxième panneau</p>
</div>
 
<h1>Titre associé au troisième panneau</h1>
<div id="panneau-3">
    <p>Contenu du troisième panneau</p>
</div>

Sans JavaScript, l’ensemble du système est déplié (affiché).

Remarque

Même si cela est moins recommandé, il est possible, sans JavaScript, de conserver les liens à l’intérieur des titres, dans ce cas, il s’agira de liens pointant vers les ancres correspondantes :

<h1><a href="#panneau-1">Titre associé au premier panneau</a></h1>
<div id="panneau-1">
    <p>Contenu du premier panneau</p>
</div>

Comportement avec JavaScript

Sur cette base, les scripts doivent ensuite gérer les points suivants :

  1. Les titres des panneaux sont agrémentés de liens qui permettront de plier ou déplier les panneaux.
  2. Les panneaux sont masqués par défaut à l’aide de display: none; via CSS.
  3. Actionner à la souris ou au clavier un lien-titre affiche et masque alternativement le panneau associé (display: none; pour le masquage et display: block; pour l’affichage).
  4. L’attribut aria-expanded=“false” est appliqué par défaut sur le lien-titre. La valeur de cet attribut change ensuite dynamiquement : true lorsque le contenu associé est affiché et false dans le cas contraire.
  5. L’attribut aria-controls est appliqué sur le lien-titre. La valeur de cet attribut reprend celle de l’attribut id du panneau associé.

Le code ainsi obtenu avec JavaScript sera le suivant :

<h1><a href="#panneau-1" aria-expanded="false" aria-controls="panneau-1">Titre associé au premier panneau</a></h1>
<div id="panneau-1">
    <p>Contenu du premier panneau (masqué)</p>
</div>
 
<h1><a href="#panneau-2" aria-expanded="true" aria-controls="panneau-2">Titre associé au deuxième panneau</a></h1>
<div id="panneau-2">
    <p>Contenu du deuxième panneau (affiché)</p>
</div>
 
<h1><a href="#panneau-3" aria-expanded="false" aria-controls="panneau-3">Titre associé au troisième panneau</a></h1>
<div id="panneau-3">
    <p>Contenu du troisième panneau (masqué)</p>
</div>

Démonstration

notices/interfaces-riches-javascript/accordeons-plier-deplier.txt · Dernière modification: Le 06/01/2014 à 11:48 par Régis Lapeze
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :