in

Cómo crear un plegable


Aprenda a crear una sección plegable.


Plegable

Haga clic en el botón para alternar entre mostrar y ocultar el contenido plegable.

Algún contenido plegable. Haga clic en el botón para alternar entre mostrar y ocultar el contenido plegable. 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 ejercicio ullamco laboris nisi ut aliquip ex ea commodo consequat.

Inténtalo tú mismo »


Crear un plegable

Paso 1) Agregar HTML:

Ejemplo

Lorem ipsum …


Paso 2) Agrega CSS:

Estilo del acordeón:

Ejemplo

/ * Aplicar estilo al botón que se utiliza para abrir y cerrar el contenido plegable * /
.collapsible {
color de fondo: #eee;

color: # 444;
cursor: puntero;
relleno: 18px;

ancho: 100%;
borde: ninguno;
alineación de texto: izquierda;

esquema: ninguno;
tamaño de fuente: 15px;
}

/ * Agrega un color de fondo al botón si se hace clic en él (agrega la clase .active con JS), y cuando mueves el mouse sobre él (hover) * /
.active, .collapsible: hover {
color de fondo: #ccc;
}

/ * Aplicar estilo al contenido plegable. Nota: oculto por defecto * /
.contenido {
relleno: 0 18px;
pantalla: ninguna;
desbordamiento: oculto;
color de fondo: # f1f1f1;
}



Paso 3) Agregar JavaScript:

Ejemplo

var coll = document.getElementsByClassName («plegable»);
var i;

para (i = 0; i coll[i].addEventListener («clic», función () {
this.classList.toggle («activo»);

var content = this.nextElementSibling;
if (content.style.display === «block») {
content.style.display = «ninguno»;
} demás {

content.style.display = «bloque»;
}
});
}

Inténtalo tú mismo »


Plegable animado (deslizar hacia abajo)

Para hacer que una animación sea plegable, agregue max-height: 0, overflow: hidden y un transition para la propiedad max-height, a la panel clase.

Luego, use JavaScript para deslizar el contenido hacia abajo estableciendo un
max-height, dependiendo de la altura del panel en diferentes tamaños de pantalla:

Ejemplo


.contenido {
relleno: 0 18px;
color de fondo: blanco;

altura máxima: 0;
desbordamiento: oculto;

transición: altura máxima 0,2 s de fácil salida;
}

Inténtalo tú mismo »


Agregar iconos

Agregue un símbolo a cada botón para indicar si el contenido plegable está abierto o cerrado:

Ejemplo

.collapsible: after {
contenido: ‘ 02795’; / * Carácter Unicode para el signo «más» (+) * /
tamaño de fuente: 13px;
color blanco;
flotar derecho;

margen izquierdo: 5px;
}

.active: después de {
contenido: » 2796″; / * Carácter Unicode para el signo «menos» (-) * /
}

Inténtalo tú mismo »

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

WebCenter Portal – Portal y solución de aplicaciones compuestas

null pointer in c

Puntero nulo en C – javatpoint