Comment - Réduire
Découvrez comment créer une section réductible.
Pliant
Cliquez sur le bouton pour basculer entre l'affichage et le masquage du contenu réductible.
Certains contenus pliables. Cliquez sur le bouton pour basculer entre l'affichage et le masquage du contenu réductible. La douleur elle-même est importante, mais la douleur est renforcée par le processus d'adipiscing, mais je lui donne le temps de la réduire afin que je fasse du bon travail et de la douleur. Afin que la plupart du temps, chacun d'entre nous vienne à l'exercice de n'importe quel type d'emploi sauf pour en profiter des objectifs.
Créer un pliable
Étape 1) Ajoutez du HTML :
Exemple
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
Étape 2) Ajoutez CSS :
Donnez du style à l'accordéon :
Exemple
/* Style the button that is used to open and close the
collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the
.active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the
collapsible content. Note:
hidden by default */
.content {
padding: 0 18px;
display:
none;
overflow: hidden;
background-color: #f1f1f1;
}
Étape 3) Ajoutez JavaScript :
Exemple
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";
}
});
}
Pliable animé (glisser vers le bas)
Pour rendre une animation pliable, ajoutez max-height: 0
, overflow: hidden
et a transition
pour la propriété max-height, à la panel
classe.
Ensuite, utilisez JavaScript pour faire glisser le contenu en définissant un calculé
max-height
, en fonction de la hauteur du panneau sur différentes tailles d'écran :
Exemple
<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>
Ajouter des icônes
Ajoutez un symbole à chaque bouton pour indiquer si le contenu pliable est ouvert ou fermé :
Exemple
.collapsible:after {
content: '\02795'; /* Unicode
character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /*
Unicode character for "minus" sign (-) */
}