Pluxopolis

La fonction

(function() {
  'use strict';
  
  const list = [...document.body.querySelectorAll('.new-page > h2')];
  if(list.length == 0) { return; }
  
  if(list.length > 1) {
    // On crée une barre de navigation s'il y a plus de 1 chapitre
    var innerHTML = '';
    list.forEach((item, i) => {
      const caption = item.textContent;
      innerHTML += `<button data-page="${i}">${caption}</button>`;
    });
    
    // On crée la barre de navigation
    const pagination_numbers_container = document.createElement('NAV');
    pagination_numbers_container.className = 'art-nav center';
    pagination_numbers_container.innerHTML = innerHTML;
    
    const page0 = list[0].parentElement;
    page0.parentElement.insertBefore(pagination_numbers_container, page0);

    // On gére le click sur la barre de navigation
    pagination_numbers_container.addEventListener('click', (evt) => {
      if(evt.target.hasAttribute('data-page')) {
        evt.preventDefault();
        // On affiche uniquement le chapitre demandé
        [...document.body.querySelectorAll('.new-page.active')].forEach((item) => {
          item.classList.remove('active');
        });
        const i = parseInt(evt.target.dataset.page);
        list[i].parentElement.classList.add('active');
        // On met en évidence uniquement le bouton du chapitre affiché
        [...pagination_numbers_container.querySelectorAll('.active')].forEach((item) => {
          item.classList.remove('active');
        });
        event.target.classList.add('active');
      }
    });
  }
  
  // On allume sur le premier .new-page ( Fire up )
  list[0].parentElement.classList.add('active');
  const btn = document.body.querySelector('.art-nav button');
  if(btn != null) {
    btn.classList.add('active');
  }
})();

Tip : integrer cette fonction en fin de document ou sur l'evenement onload(). L'article doit-être déjà chargé pour que le script puissent y extraire les données necessaire à la création de la pagination.

Comment fonctionne le script?

Le script va rechercher les conteneur avec la class .new-page et si ceux-ci ont un h2 en enfant direct.

Si il y plus d'un conteneur correspondant à cette condition, alors une barre de navigation est créée et tous les conteneurs .new-page sont cachés, excepté le premier.

Chaque lien de pagination, prendra le texte contenu par premier titre h2 de chaque conteneur. Au click, il affichera alors le conteneur auquel il correspond en cachant les autres. C'est le cas dans cet article que vous lisez.

Conditions requises

Chaque portion de page devra obligatoirement être incluse dans un conteneur avec la class .new-page ayant un titre <h2>.

Le squellette HTML de base à reproduire pour chaque section de votre page est:

  <div class="new-page">
    <h2>Chapitre X</h2>
    <!-- Contenus ici -->
  </div>

Dans votre feuille de style, Pour qu'une seule de ces portion s'affiche, il faudra un minimum de style pour n'affiché qu'un seul de ses éléments:

.new-page:not(.active) {
  display: none;
}

Vous trouverez un exemple modifiable en ligne ici : Exemple en ligne du script.

Une autre version de ce script, légèrement différente, permet de paginer les portions en les regroupant par groupe de 1 à X. configuration à partir de la variable constante (ligne 6) const items_per_page = 1;//indiquez ici le nombre à regrouper.