HTML & CSS, Javascript, JQuery

abril 2015

Cómo hacer desplegables con CSS3 y JQuery

En este ejemplo vamos a ver un par de formas de hacer desplegables con JQuery y CSS3.

En ambos casos la estructura HTML será la misma, un h2 con un título junto con una capa con la clase “plegable”. Algo así:

Opción 1 – programar el movimiento mediante transiciones CSS

Con esta opción, al hacer click en el h2 añadimos/quitamos una clase al div que queremos “plegar/desplegar. Con esta clase, modificamos la propiedad max-height de la capa. Cuando está plegada el valor de max-height sería 0. Cuando está desplegada tenemos que poner un valor lo suficientemente alto como para asegurarnos de que siempre se va a ver todo el contenido. Este método me gusta sobre todo para capas con altos fijos. El código nos quedaría así:

CSS

JAVASCRIPT

Opción 2 – programar el movimiento mediante JQuery

En esta opción, modificamos el height de la capa para plegar/desplegar. JQeury por defecto no permite animar desde height:0 a height:auto, pero gracias a este plugin de JQuery, podemos hacer un una animación del height hacia su valor “auto”. De esta manera nos quedaría algo así:

CSS

JAVASCRIPT

Podéis ver los ejemplos en movimiento aquí:

Ejemplo1: Transiciones CSS3

Ejemplos2: JQuery