RegalTabs & RegalAccordion

Si on veut des onglets en mode desktop et des accordéons en mode mobile, la solution consiste à charger les deux constructeurs Javascript Vanilla RegalTab et RegalAccordion, à appliquer une structure HTML adéquate et à déclarer les objets en fonction du contexte mobile/desktop.
Certes, c'est un peu tordu mais cela fonctionne parfaitement !

Github repository

HTML

Conteneur principal avec classes .tabs et .tabs-accordion
Attribut data-active détermine l'onglet affiché par défaut : "0": le premier, "1": le deuxième, etc.
Avec la classe .vertical la navigation Onglets sera placée à gauche des onglets, les liens les uns en dessous des autres..
Avec la classe .horizontal la navigation Onglets sera placée au dessus des onglets, les liens les uns à côté des autres..
Pour les mobiles, la navigation est toujours au dessus des onglets et les liens sont placés les uns sous les autres.
    Un enfant avec classe .tabs-nav.
        Chaque enfant de ce bloc .tabs-nav est un lien vers un onglet et doit avoir la classe .tabs-nav-item. :
    Un enfant avec classes .tabs-cont et .accordion-mobile qui va contenir les onglets et l'accordéon.
        Chaque onglet doit avoir la classe .tab, contenir un enfant .open-close (pour des raisons d'accessibilité, on choisira une balise titre <hN>) avec le même titre que celui de la nav-tab correspondante et qui va servir pour ouvrir/fermer l'accordéon.
            Le contenu de l'onglet (et de l'accordéon du coup) doit être placé dans un container .desc-cont lui-même contenu dans un .accordion-desc. <div class="tabs tabs-accordion vertical" data-active="0">     <nav class="tabs-nav">         <a href="#tab1" class="tabs-nav-item">             <span>Onglet 1</span>         </a>         ...etc...     </nav>     <div class="tabs-cont accordion-mobile" data-default="closed">         <div id="tab1" class="tab">             <h2 class="open-close"><span>Onglet 1</span></h2>             <div class="accordion-desc">                 <div class="desc-cont">                     Contenu onglet 1                 </div>             </div>         </div>         ...etc...     </div> </div> L'attribut href des .tabs-nav-item doit contenir un lien vers l'id de l'onglet correspondant sous forme d'ancre. Il permet au javascript de retrouver l'onglet correspondant et aux utilisateurs non-javascript d'aller vers l'onglet directement.

Comme la navigation contenant les titres des onglets est dans un bloc séparé des onglets, pour des raisons d'accessibilité, on appliquera le style .open-close utilisé par l'accordéon à des des balise <hN> dans les onglets.

CSS

La CSS de base contient tout ce qu'il faut au niveau fonctionnel pour Onglets et Accordéons.
Cependant, l'habillage graphique sera à ajouter pour chaque cas.
SCSS: scss/components/_tabs.scss

JAVASCRIPT

• js/regal-tabs-vanilla.js
  
• js/regal-accordion-vanilla.js
  
• js/regal-tabs-accordion-declaration.js.js

Inclure les constructeurs en bas de page avant la fermeture du body : <script src="js/regal-tabs-vanilla.js"></script> <script src="js/regal-accordion-vanilla.js"></script> Puis initialiser ou détruire les objets RegalAccordion et RegalTab selon le contexte desktop/mobile au chargement de la page et en fin de resize de fenêtre : var tabsAccordion = document.querySelectorAll('.tabs-accordion'); if(tabsAccordion.length){     var accordionMobile = document.querySelectorAll('.accordion-mobile');     var tabs = document.querySelectorAll('.tabs');     function initAccordionTab(){         if(isMobileContext){             if(tabs){                 tabs.forEach(function(elt){                     if(elt.tab){                         elt.tab.destroy();                         elt.tab = false;                     }                 });             }             if(accordionMobile){                 accordionMobile.forEach(function(elt){                     elt.style.minHeight = '0px';                     if(!elt.accordion){                         elt.accordion = new RegalAccordion(elt);                     }                 });             }         }         else{             if(accordionMobile){                 accordionMobile.forEach(function(elt){                     if(elt.accordion){                         elt.accordion.destroy();                         elt.accordion = false;                     }                 });             }             if(tabs){                 tabs.forEach(function(elt){                     if(!elt.tab){                         elt.tab = new RegalTabs(elt);                     }                 });             }         }     };     initAccordionTab();     window.addEventListener('resizeEnd', function() {         initAccordionTab();     }); } On stocke les objet RegalTab et regalAccordion dans les éléments HTML (elt.tab et elt.acc) de façon à pouvoir faire appel aux méthodes publiques des constructeurs.

NOTA IMPORTANTA :
Il faut ajouter quelques POLYFILLS/fonctions avant la déclaration des objets :
- forEach pour HTMLCollection;
- triggerevent;
- resizeEnd.
Et déclarer quelques variables : windowHeight, windowWidth, mobileLimit, desktopLimit et isMobileContext.
Généralement, j'ai tout un tas de petites fonctions/variables de ce genre déclarées dans le fichier general.js du projet et qui me sont indispensables, j'en parle dans un autre article.