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

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.

Démo

Onglet 1

Contenu onglet 1

Wisi iudico cu his, ei choro solet semper eam. Utinam detracto abhorreant his et, sit cu esse dolor perpetua. Id consetetur voluptatibus vim. Movet pertinax vulputate vim eu. Te mea apeirian deterruisset.

Ea bonorum oporteat insolens duo, quodsi dignissim eu vis, ei adhuc probatus vix. Solum verear mediocrem per ei, at sed autem disputando. Enim omnes te sit, menandri expetenda cotidieque mel ei, sit nusquam persequeris interpretaris cu. Debet vulputate instructior mea te, cum no doctus deleniti. Nec in persecuti cotidieque, ei saepe explicari accusamus quo, solet maiorum iudicabit no vix. Quo ne animal partiendo tincidunt, animal voluptua scribentur ut vix.

Eos in labore salutatus voluptaria, habeo inciderint ad has, ei vix dignissim consetetur scripserit. Eirmod efficiendi eos in, quas dolorem cu vim. Oporteat temporibus nam an, sed at accusata quaerendum persequeris. Ea vero menandri constituto sit, no vim graece oblique. No alii praesent sea.

Onglet 2

Contenu onglet 2

Ad vix liber facete. Meis voluptaria instructior an ius, cu meis aliquam dignissim has, ius ad posse viris conclusionemque. Eam modo quot ex. Eam legere eripuit indoctum ex, ei everti equidem vituperata his, et enim oporteat perpetua qui. Ex nisl decore philosophia est, dicunt eripuit has ad, tamquam delicata mediocritatem vim te. Eu aliquam dissentiet adversarium mei, facer zril timeam vim at, in cum purto euripidis adversarium. Hinc semper ponderum mel id, id eos quod dicant suavitate, ad brute iisque pro.

EDolorum accusamus laboramus has at, ius sale interesset ad. Cu nam everti feugiat, cum ea ludus suavitate dissentiunt. Duo ei agam reformidans, ius an probo quodsi, docendi fastidii verterem has ea. Ex stet impetus pertinax quo, agam dictas suscipiantur an qui. In pro salutatus cotidieque, vix ut sumo pericula corrumpit, et nam idque movet decore.

Vero ludus no mei. Vix no meis reprimique, an has viderer quaeque, debet molestiae dissentiet vim an. Vocent patrioque ad mei, legere omnium at vel. Ei error ignota mea, mel ei timeam petentium gloriatur. Has essent nusquam ex, an ullum tritani alienum mei, enim animal insolens ne sed. Probo iuvaret scribentur eos at, eum eu mazim harum noluisse.

Onglet 3

Contenu onglet 3

In sit agam vocibus maiestatis, cum agam admodum quaerendum eu. Duo esse petentium eu. Id prompta feugait consequat per, ius ea audire commune, aliquam tibique necessitatibus te eos. Pro idque dicit paulo no, sanctus reprimique duo eu. No movet tantas virtute cum, omnium recteque ut qui.

At munere alienum vim, id vis vide assentior maiestatis, id vel aliquip consulatu. Eos ei noluisse torquatos, est solum nemore no. Has dicant dolorem vulputate ad, cum ei rebum alterum, libris pertinax eu vix. An vix case minimum inimicus, sea harum denique efficiantur ea, eum quodsi platonem persequeris at.

Pri graece audiam in, in eos audiam latine iuvaret, mundi legimus te pro. Ex quas mucius dolorem est. Omnis omittantur eam no, an nam appareat dissentias. Sed id noster regione repudiandae, augue veniam decore eos an. Agam soluta nusquam cu vim, eu liber mucius timeam vim. Nec ea inermis fastidii efficiendi. Vel quis patrioque inciderint id, quando alienum sadipscing no sea, eum option viderer no.