Via les balises HTML5, details et summary, il est possible d'afficher / cacher des parties de pages web.

  <details>
    <summary>Résumé</summary>
    <p>Détails ...</p>
  </details>

Effet accordéon

Avec w3.css et w3.js (originaux)

Exemple :

Code HTML :

  <div onclick="w3.toggleClass('#section1','w3-show')"
    class="w3-button w3-block w3-left-align w3-pale-blue">
    Section 1
  </div>
  <div id="section1" class="w3-panel w3-black w3-hide">
    <p>Lorem ipsum ...</p>
  </div>

Que chaque section possède un ID n'est pas un gros inconvénient car cela permet de pointer directement vers cette section via un lien (interne ou externe)

Avec w3.css, w3.js et signPlus.css

Avec, à droite, un + qui se transforme en un - => du code CSS supplémentaire

signPlus.css :

.signPlus:after {
  content: '\2795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.signMinus:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

Exemple :

Code HTML :

  <div onclick="w3.toggleClass('#section2','w3-show');
    w3.toggleClass(this,'signMinus');"
    class="w3-button w3-block w3-left-align w3-pale-blue signPlus">
    Section 2
  </div>
  <div id="section2" class="w3-panel w3-black w3-hide">
    <p>Contenu de la section 2</p>
  </div>

Il est possible d'imbriquer les sections.

Exemple :

Code HTML :

  <div onclick="w3.toggleClass('#section3','w3-show'); w3.toggleClass(this,'signMinus');"
    class="w3-button w3-block w3-left-align w3-pale-blue signPlus">
    Section 3
  </div>
  <div id="section3" class="w3-panel w3-black w3-hide">
    <div onclick="w3.toggleClass('#section4','w3-show'); w3.toggleClass(this,'signMinus');"
      class="w3-button w3-block w3-left-align w3-pale-blue signPlus">
      Section 4
    </div>
    <div id="section4" class="w3-panel w3-black w3-hide">
      <p>
        Contenu de la section 4
      </p>
    </div>
  </div>

Sans w3.css et w3.js

L'identification de chaque section n'est pas une réelle gêne. Par contre, le code HTML devient lourd en utilisant exclusivement w3.css et w3.js.

Il est plus élégant de n'utiliser que 3 classes : btnAccordion, divAccordion et btnAccorActive.

accordion.css (à lier à la page web) :

.btnAccordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.btnAccorActive, .btnAccordion:hover {
  background-color: #ccc;
}

.divAccordion {
  /*padding: 0 18px;
  background-color: white;*/
  display: none;
  overflow: hidden;
}

.btnAccordion:after {
  content: "\2795"; /* "\2795" = ➕ ou "\25bc" = ▼ */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.btnAccorActive:after {
  content: "\2796"; /* "\2796" = ➖ ou "\25b2" = ▲ */
}

La valeur du "content" peut aussi être ▼ et ▲ (soit les codes "\25bc" et "\25b2")

accordion.js (à lier à la page web) :

/* crée des écouteurs au chargement de la page */
var acc = document.getElementsByClassName("btnAccordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("btnAccorActive");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Ce code JS doit être chargé lorsque le code HTML est chargé.

Exemple :

Code HTML :

  <button class="btnAccordion">Titre 1 : A</button>
  <div class="divAccordion">
    <button class="btnAccordion">Sous-titre</button>
    <div class="divAccordion">
      <p>Lorem ipsum ...</p>
    </div>
  </div>
  <button class="btnAccordion">Titre 1 : B</button>
  <div class="divAccordion">
    <p>Lorem ipsum ...</p>
  </div>

On constate que ce code ci-dessus est plus simple et intuitif que le code HTML de la section 3. Cependant, il est essentiel que la balise contenant la classe btnAccordion soit immédiatement suivie par une balise contenant la classe divAccordion.

Avec w3P.css et w3P.js

Comme le fichier w3.css (original) et le w3.js (original) finissent par être utilisés pour une page web "professionnelle" et compte tenu de leurs faibles poids, il est préférable de les personnaliser en : w3P.css et w3P.js.

Ainsi le code contenu dans le fichier accordion.css est ajouté à la fin du fichier w3.css (original) et celui accordion.js à la fin de w3.js.

Il est préférable de les placer à la racine de tout site (ou sous-site qui pourrait devenir un site à part entière)

Voir accordion_w3P.htm

Liens

• w3schools > w3.css > accordions
• w3schools - HowTo