Comment créer : contenu repliable / accordéon

Apprendre à créer un accordéon (contenu repliable).

Accordéon

L'accordéon est très utile lorsque vous souhaitez basculer entre l'affichage caché et visible de grandes quantités de contenu :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Essayer par vous-même

Créer un accordéon

Étape 1 - Ajouter HTML :

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Étape 2 - Ajouter CSS :

Définir les styles de l'accordéon

/* Définir les styles pour les boutons d'ouverture et de fermeture du panneau d'accordéon */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Ajouter une couleur de fond si le bouton est cliqué (ajouté via JS de la classe .active) et lors du survol de la souris (survol) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Ajouter des styles au panneau d'accordéon. Note : il est masqué par défaut */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Étape 3 - Ajouter JavaScript :

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Changer l'ajout et la suppression de la classe "active", pour mettre en évidence les boutons du panneau de contrôle */
    this.classList.toggle("active");
    /* Changer l'affichage caché et visible du panneau actif */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Essayer par vous-même

Accordéon animé (défilement vers le bas)

Pour créer une animation d'accordéon, ajoutez max-height: 0,overflow: hidden ainsi que max-height l'effet de transition de la propriété.

Ensuite, utilisez JavaScript pour calculer et définir la hauteur du panneau en fonction de la taille de l'écran max-heightPour réaliser l'effet de défilement vers le bas du contenu :

<style>
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
</script>

Essayer par vous-même

Ajouter l'icône

Ajouter un symbole sur chaque bouton pour indiquer si le contenu roulable est ouvert ou fermé :

.accordion:after {
  content: '\02795'; /* "Signe plus" (+) en caractère Unicode */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* "Signe moins" (\u2212) en caractère Unicode */
}

Essayer par vous-même