Comment créer : l'effet de pliage

Apprendre à créer des parties repliables.

Effet repliable

Cliquez sur ce bouton pour basculer entre afficher et masquer le contenu repliable.

Quelques contenus repliables. Cliquez sur le bouton pour basculer entre afficher et masquer le contenu repliable. 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 vous-même

Créer un effet de contenu repliable

Première étape - Ajouter HTML :

<button type="button" class="collapsible">Ouvrir le contenu repliable</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Deuxième étape - Ajouter CSS :

Définir le style de l'accordion :

/* Définir le style du bouton pour ouvrir et fermer le contenu repliable */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Ajouter une couleur de fond à la bouton lorsque celui-ci est cliqué ou lorsque la souris est dessus (survol), en utilisant JS pour ajouter la classe .active */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Définir le style du contenu repliable. Attention : masqué par défaut */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Troisième étape - Ajouter JavaScript :

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Essayer vous-même

Animated collapse effect (scroll down)

To create an animated collapse effect, please add max-height: 0,overflow: hide and max-height property transition to the panel class.

Then, use JavaScript to add the calculated max-height To scroll down the content, it depends on the height of the panel on different screen sizes:

Example

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

Essayer vous-même

Add icon

Add a symbol to each button to indicate whether the collapsible content is open or closed:

Example

.collapsible:after {
  content: '\02795'; /* Represents the Unicode character for 'plus' (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* Represents the Unicode character for 'minus' (-) */
}

Essayer vous-même