Cómo - Contraer
Aprende a crear una sección contraíble.
Plegable
Haga clic en el botón para alternar entre mostrar y ocultar el contenido contraíble.
Algunos contenidos plegables. Haga clic en el botón para alternar entre mostrar y ocultar el contenido contraíble. El dolor en sí es importante, pero el dolor aumenta con el proceso de adipiscencia, pero le doy tiempo para reducirlo para que haga un gran trabajo y dolor. De modo que en su mayor parte, cualquiera de nosotros acudirá al ejercicio de cualquier tipo de empleo excepto para aprovechar los objetivos del mismo.
Crear un plegable
Paso 1) Agregar HTML:
Ejemplo
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
Paso 2) Agregar CSS:
Dale estilo al acordeón:
Ejemplo
/* 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;
}
Paso 3) Agregar JavaScript:
Ejemplo
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";
}
});
}
Plegable animado (deslizante hacia abajo)
Para hacer que una animación sea plegable, agregue max-height: 0
, overflow: hidden
y a transition
para la propiedad max-height, a la panel
clase.
Luego, use JavaScript para deslizar el contenido hacia abajo configurando un calculado
max-height
, según la altura del panel en diferentes tamaños de pantalla:
Ejemplo
<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>
Agregar iconos
Agregue un símbolo a cada botón para indicar si el contenido plegable está abierto o cerrado:
Ejemplo
.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 (-) */
}