Comme c’est basé sur une structure HTML de base (Hx), même si le JavaScript n’est pas chargé, la page marchera, c’est le miracle de l’amélioration progressive ;
Pas de CSS/JavaScript injecté en ligne, le DOM reste propre, ce qui cool pour le responsive.
C’est (hautement) personnalisable
Vous pouvez le styler comme vous voulez ;
Vous pouvez utiliser des transitions ou des animations… comme vous voulez ;
Vous pouvez créer un namespace pour les classes générées si vous avez besoin de différents comportements dans la même page ;
Chaque aspect du script peut être personnalisé, la configuration par défaut peut être surchargée à l’appel du plugin, si vous transpilez le script en ES5, ce sera compatible IE9+.
Libre et sous une license permissive
Pas de problème : c’est placé sous licence MIT, donc c’est libre, open-source et vous pouvez faire ce que vous voulez avec, incluant une utilisation commerciale. Cette note de permission doit être incluse dans toutes les copies complètes ou partielles du script.
Cependant, il n’est pas interdit de me dire que vous l’avez utilisé, ou de m’envoyer un petit « merci ». ;)
Léger
11kb (développement, lisible par les humains) ;
~6kb (minifié, lisible par des machines) ;
~2kb minifié et gzippé (lisible par… des mutants ‽‽)
Simplement, cela va transformer ceci :
<h2class="js-expandmore">Lorem dolor si amet</h2><divclass="js-to_expand">
Ici le contenu caché
</div>
En ceci :
<h2class="js-expandmore"><buttonaria-controls="expand_1"aria-expanded="false"class="expandmore__button"><spanclass="expandmore__symbol"aria-hidden="true"></span>
Lorem dolor si amet
</button></h2><divid="expand_1"class="js-to_expand"aria-labelledby="label_expand_1">
Ici le contenu caché
</div>
Les attributs et leurs valeurs sont générés à la volée (data-controls="expand_1", id="expand_1", data-labelledby="label_expand_1"), pas besoin de vous en soucier
Téléchargez le script
Vous pouvez utiliser la commande npm : npm i van11y-accessible-hide-show-aria.
Vous pouvez aussi utiliser Bower : bower install van11y-accessible-hide-show-aria.
Conventions
Ensuite, suivez cette convention (qui peut être adaptée selon vos besoins, voir « Configuration par défaut ») :
<h2class="js-expandmore">Lorem dolor si amet</h2><divclass="js-to_expand">
Ici le contenu caché
</div>
Pour des raisons d’accessibilité, vous devez poser la classe class="js-expandmore" sur un élément Hx (h1, h2, h3, etc.). Les éléments qui ont les classes js-expandmore et js-to_expanddoivent être adjacents.
Ensuite, utilisez le script qui fera le reste.
Le script est lancé au chargement de la page. Si vous avez besoin de l’exécuter sur du contenu généré en AJAX, vous pourrez utiliser par exemple sur <div id="newContent">la source des panneaux dépliants</div> :
var my_expand =van11yAccessibleHideShowAria();
my_expand.attach(document.getElementById('newContent'));
Comment créer différents styles dans la même page ?
C’est possible et même très simple, utilisez l’attribut data-hideshow-prefix-class="<votre_valeur>" comme ceci :
<h2class="js-expandmore"data-hideshow-prefix-class="mini-combo">Lorem dolor si amet</h2><divclass="js-to_expand">
Ici le contenu caché
</div>
Cela préfixera les classes générées, <votre_valeur>-expandmore__button et <votre_valeur>-expandmore__to_expand, comme suit :
<h2class="js-expandmore"data-hideshow-prefix-class="mini-combo"><buttonid="label_expand_2"class="mini-combo-expandmore__button js-expandmore-button"data-controls="expand_2"aria-expanded="false"type="button">
Lorem dolor si amet
</button></h2><divid="expand_2"class="js-to_expand mini-combo-expandmore__to_expand"data-hidden="true"data-labelledby="label_expand_2">
Ici le contenu caché
</div>
Le script va préfixer toutes les classes, et donc vous pourrez les styler comme bon vous semble. Si vous n’utilisez pas cet attribut, le script n’y verra aucun problème.
constCONFIG={HIDESHOW_EXPAND:'js-expandmore',HIDESHOW_BUTTON_EXPAND:'js-expandmore-button',HIDESHOW_BUTTON_EXPAND_STYLE:'expandmore__button',HIDESHOW_BUTTON_LABEL_ID:'label_expand_',DATA_PREFIX_CLASS:'data-hideshow-prefix-class',HIDESHOW_BUTTON_EMPTY_ELEMENT_SYMBOL:'expandmore__symbol',HIDESHOW_BUTTON_EMPTY_ELEMENT_TAG:'span',ATTR_HIDESHOW_BUTTON_EMPTY_ELEMENT:'aria-hidden',HIDESHOW_TO_EXPAND_ID:'expand_',HIDESHOW_TO_EXPAND_STYLE:'expandmore__to_expand',/*
recommandé par les experts a11y
*/ATTR_CONTROL:'data-controls',ATTR_EXPANDED:'aria-expanded',ATTR_LABELLEDBY:'data-labelledby',ATTR_HIDDEN:'data-hidden',IS_OPENED_CLASS:'is-opened',DISPLAY_FIRST_LOAD:'js-first_load',DISPLAY_FIRST_LOAD_DELAY:'1500',...config
};
Si vous avez besoin d’une autre configuration, il faut appeler le plugin ainsi :
var other_expand =van11yAccessibleHideShowAria({HIDESHOW_EXPAND:'js-expandmore2',DATA_PREFIX_CLASS:'data-hideshow-prefix-class2'});
other_expand.attach();
Et tout fonctionnera comme vous le souhaitez.
Ouvert par défaut
Pas de souci, c’est possible et même très simple, utilisez la classe is-opened sur :
<h2class="js-expandmore">Lorem dolor si amet</h2><divclass="js-to_expand is-opened">
Ici le contenu caché
</div>
Le script va le détecter, et faire que cela soit ouvert par défaut. Aussi simple qu’un copier/coller.
Animations
Pas de souci, c’est possible en utilisant des transitions CSS. Vous devez avoir à l’esprit plusieurs choses pour faire que cela soit accessible :
Vous ne pouvez pas animer la propriété display, et la propriété height peut être très compliquée à animer également (sans hauteur connue).
Donc dans ce cas, il est impossible d’utiliser display: none; pour cacher un contenu (même pour les technologies d’assistance).
Donc vous devez passer la propriété visibility à visible ou hidden pour afficher/cacher un contenu.
En clair, vous devez animer max-height, opacity (si besoin), et utiliser visibility pour cacher le contenu aux technologies d’assistance.
Si vous avez cliqué sur cette section, vous aurez pu voir l’animation en action. Partons de l’idée qu’on a cette source :
<h2class="js-expandmore mb0 mt0"data-hideshow-prefix-class="animated">Bonus : des animations ?</h2><divclass="js-to_expand">
…
</div>
Voici donc le code CSS pour les transitions (non préfixé) :
/* Ceci est l’état ouvert */.animated-expandmore__to_expand {display: block;overflow: hidden;opacity: 1;transition: visibility 0s ease, max-height 2s ease, opacity 2s ease ;max-height: 80em;/* nombre magique pour max-height = assez de hauteur */visibility: visible;transition-delay: 0s;}/* Ceci est l’état fermé */[data-hidden=true].animated-expandmore__to_expand {display: block;max-height: 0;opacity: 0;visibility: hidden;transition-delay: 2s, 0s, 0s;}
Voici l’astuce : de l’état « fermé » à l’état « ouvert », la propriété visibility est immédiatement mise à visible, et max-height/opacity sont « normalement » animées.
De l’état « ouvert » à l’état « fermé », l’animation de la propriété visibility a un délai. Donc le contenu sera caché… à la fin de l’animation de max-height/opacity.
Attributs ARIA ou attributs data ?
Pas de souci. Au début du code du script, voici la configuration par défaut :
Cette configuration par défaut est recommandée par les experts accessibilité (et pour fonctionner dans le plus de cas possibles).
Si vous avez besoin de faire autrement, vous pouvez, le script s’adaptera. Exemple :
var my_expand =van11yAccessibleHideShowAria({ATTR_CONTROL:'aria-controls',ATTR_EXPANDED:'aria-expanded',ATTR_LABELLEDBY:'aria-labelledby',ATTR_HIDDEN:'aria-hidden',});
my_expand.attach();
Bien sûr, il faudra mettre à jour votre CSS en utilisant les bons attributs si besoin est.