Collapse

Présentation

Collapse est un composant html/js/css qui permet de plier et déplier des contenus. Une option permet d'indiquer les éventuels contenus dépliés par défaut.

Si javascript n'est pas chargé dans le navigateur, tous les contenus sont affichés.

Note : ce module a été développé par Nicolas Hoffmann.

Utilisation

Les attributs nécessaires à la dynamique d'ouverture/fermeture et à son accessibilité sont injectés par le script.

Pour que le script fonctionne correctement, le code html doit répondre à deux impératifs :

  1. L'élément déclencheur doit porter la class js-expandmore et l'élément à montrer/cacher doit porter la class js-to-expand.
  2. Ces deux éléments doivent être voisins immédiats dans la source.

Les styles présents dans le module sont les styles minimaux pour le bon fonctionnement du module.

Il est possible d’ajouter un bouton pour déplier / replier tous les blocs de la page.

Le texte affiché dans ce bouton se configure dans le fichier javascript.

Script associé

Pour que ce module fonctionne, le script associé doit être appelé dans le pied de page, avant la fermeture du body.

Note : copier le script présent dans le module à l'endroit où sont rangés les autres scripts.

Exemple

<button class="js-expandmore-all" data-expand="true">Tout déplier</button>

<h2 class="js-expandmore">Une question ?</h2>
<div class="js-to_expand">
  <p>Le contenu caché peut être constitué de tout élément html : paragraphes, titres, tableaux, images…</p>
</div>

<h2 class="js-expandmore">Une autre question ?</h2>
<div class="js-to_expand is-opened">
  <p>Ce contenu repliable est ouvert par défaut.</p>
</div>