Hoe - Samenvouwen
Leer hoe u een samenvouwbare sectie maakt.
Opvouwbaar
Klik op de knop om te schakelen tussen het weergeven en verbergen van de opvouwbare inhoud.
Wat opvouwbare inhoud. Klik op de knop om te schakelen tussen het weergeven en verbergen van de opvouwbare inhoud. De pijn zelf is belangrijk, maar de pijn wordt versterkt door het proces van adipiscing, maar ik geef het de tijd om het te verminderen, zodat ik geweldig werk en pijn kan doen. Om tot een minimum te komen, wie van ons zou een baan moeten uitoefenen, behalve om te profiteren van de gevolgen ervan.
Maak een opvouwbaar
Stap 1) HTML toevoegen:
Voorbeeld
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
Stap 2) CSS toevoegen:
Stijl de accordeon:
Voorbeeld
/* 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;
}
Stap 3) JavaScript toevoegen:
Voorbeeld
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";
}
});
}
Geanimeerd opvouwbaar (naar beneden schuiven)
Om een animatie samenvouwbaar te maken, voegt u max-height: 0, overflow: hiddenen a transitionvoor de eigenschap max-height toe aan de panelklasse.
Gebruik vervolgens JavaScript om de inhoud naar beneden te schuiven door een berekende in te stellen
max-height, afhankelijk van de hoogte van het paneel op verschillende schermformaten:
Voorbeeld
<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>
Pictogrammen toevoegen
Voeg een symbool toe aan elke knop om aan te geven of de opvouwbare inhoud open of gesloten is:
Voorbeeld
.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 (-) */
}