RegalTabs

La présentation de contenu par onglets revient régulièrement alors voici un petit constructeur Javascript Vanilla qui permet de la générer facilement.

Github repository

HTML

Conteneur principal avec classe .tabs
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 sera placée à gauche des onglets, les liens les uns en dessous des autres..
Avec la classe .horizontal la navigation 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 classe .tabs-cont qui va contenir les onglets.
        Chaque onglet doit avoir la classe .tab.
<div class="tabs vertical" data-active="0">     <nav class="tabs-nav">         <a href="#onglet1" class="tabs-nav-item">             Onglet 1         </a>         <a href="#onglet2" class="tabs-nav-item">             Onglet 2         </a>     </nav>     <div class="tabs-cont">         <div id="onglet-1" class="tab">             <h3 class="hide">Onglet 1</h3>             <p>                 Ne inani labitur est....             </p>         </div>         <div id="onglet-2" class="tab">             <h3 class="hide">Onglet 1</h3>             <p>                 Sea cu inimicus salutandi...             </p>         </div>     </div> </div> L'attribut href des .tabs-nav-item doit contenir un lien vers l'onglet correspondant sous forme d'ancre. Il permet au javascript de retrouver l'onglet 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 place des balise <hN class="hide"> dans les onglets. .hide{ position: absolute; left: -100000px; top: -10000px;}

CSS

La CSS de base ne contient que le positionnement des blocs en mode horizontal/vertical et mobile/desktop.
L'habillage graphique sera à ajouter pour chaque cas.
SCSS: scss/components/_tabs.scss
CSS: css/tabs.css
HABILLAGE DE BASE CSS: css/tabs-habillage.css

JAVASCRIPT

Inclure le constructeur en bas de page avant la fermeture du body : <script src="js/regal-tabs-vanilla.js"></script> Déclarer les objets : var tabs = document.querySelectorAll('.tabs'); if(tabs){ tabs.forEach(function(elt){ if(!elt.tab){ elt.tab = new RegalTabs(elt); } }); } On stocke l'objet RegalTab dans l'élément HTML (elt.tab) de façon à pouvoir facilement faire appel aux méthodes publiques du constructeur.

Méthodes publiques

Pour détruire l'objet : if(elt.tab){ elt.tab.destroy(); elt.tab = false; } Pour updater la hauteur du bloc si jamais son contenu change : if(elt.tab){ elt.tab.resize(); }

Forcer ouverture d'un onglet avec une ancre dans l'URL

On peut aussi forcer l'ouverture d'un volet en passant une ancre dans l'URL.
Il faut pour cela bien relier les éléments de navigation avec les éléments de contenus via leurs attributs ID :
<div class="tabs vertical" data-active="0"> <nav class="tabs-nav"> <a href="#onglet1" class="tabs-nav-item" id="onglet1-nav">Onglet 1</a> <a href="#onglet2" class="tabs-nav-item" id="onglet2-nav">Onglet 2</a> </nav> <div class="tabs-cont"> <div id="onglet-1" class="tab"> ... </div> <div id="onglet-2" class="tab"> ... </div> </div> </div> Si l'élément .tabs-cont de l'objet RegalTabs contient un élément avec un identifiant identique à l'ancre, l'onglet correspondant est ouvert. Cette action prend le dessus sur l'onglet ouvert par défaut via l'attribut data-active.

Entrer les clicks dans l'historique du navigateur

En ajoutant un attribut data-history="1", l'ancre est ajoutée à l'URL et l'affichage de l'onglet entre dans l'historique du navigateur.
<div class="tabs vertical" data-active="0" data-history="1">

js/regal-tabs-vanilla.js

Démo en mode vertical

Ne inani labitur est. Sea cu inimicus salutandi. Invidunt definiebas no mea, viderer legimus reformidans vix ne. Ut sea quando pertinax partiendo, in ius cibo posse invenire, sit alii dico ea. Tempor euismod petentium at sit, et quo posse errem persius. Ignota salutatus dissentiunt pri ei, nostrud tacimates ne vix.

Putent platonem contentiones has id, usu choro antiopam ut, ut autem nostrud expetendis nec. Mentitum erroribus et eam, est ei animal efficiantur. Mutat aliquip volutpat pro ad, ei fabulas delenit has. Id mea probo antiopam efficiantur. Ad nam timeam corpora, te pri etiam graeco disputationi, in modo iriure inermis nec. Sea in offendit sensibus laboramus.

Laudem aliquip eum ei. Ad lorem numquam sed, eos cu facer vitae fastidii. Audiam accusamus gubergren per ad. Duo ea tollit labore civibus, mel tota minimum consequat at. Vel ea lorem tantas. In cum alienum scaevola.

Ad eos quaeque tacimates. An sea odio animal pericula. Mundi admodum sadipscing in eum, pro cu incorrupte sadipscing. Lucilius recusabo ei nec. Nam accusamus efficiantur ad. Est soluta mediocritatem ea, mel molestie erroribus te, no pro fabulas molestie similique.

Iudico dolores honestatis in mei, has ut iudico admodum sensibus. Te case labore assentior vel, duo quando nominati salutandi at, possim melius diceret mea ad. Id tamquam fuisset perpetua vim, cu eam equidem oporteat antiopam, tantas dicunt perfecto ei vis. Ut modo natum audiam est, doming iuvaret voluptatibus ex usu. Ut nostro persecuti mei, cu vel dicta deserunt dissentiunt. Te pro reprimique delicatissimi, ea vix timeam tincidunt assueverit.

Duo eu tantas dolores cotidieque, ne duo quod facilisi intellegat. Ex has prima mandamus dissentias, ullum prompta iuvaret cu eos, nonumes cotidieque eos ne. Sea ad nobis partem putent, ea aliquid imperdiet mea. Mea vocent scribentur cu, cum iuvaret accusamus ex, quo in habeo alienum. Sonet ridens cu mea.

Has graecis dolores an, natum suavitate incorrupte id eos. Duo modus consulatu hendrerit no, vix nisl aliquid commune in, est ut minim movet. Id nec ceteros fastidii invidunt. Illum integre consectetuer cu vix, eu tollit dicant delenit quo, id viderer imperdiet evertitur vix. Enim tollit numquam pri no, ex pri accumsan periculis, eum brute aeque verear ei.

Prompta detraxit adipiscing ut vis, mea at quidam accommodare consequuntur. Vim utinam fastidii deleniti ea, ex eos dicat urbanitas incorrupte. Est dicit solet cu, cum ut affert dolorum interesset, eu mel verterem indoctum postulant. Pri reque platonem maiestatis ea, te ius postea accusata abhorreant. Te est ferri dicit exerci, offendit appareat ut his. Cum agam facer essent te, eum ut solet imperdiet.

Cum te stet corpora epicurei. Quo aperiam iuvaret an. Nam wisi voluptaria voluptatum in, epicuri quaestio iracundia ad qui. Eu oratio pertinax sed, ea ignota habemus cum. Ea vix assum adolescens, sit no tation pertinax argumentum.