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í:
|
1 2 3 4 5 6 7 8 9 |
<h2>Desplegable 1</h2> <div class="plegable"> <p>Lorem fistrum no te digo trigo por no llamarte Rodrigor quietooor a gramenawer me cago en tus muelas fistro qué dise usteer pecador sexuarl no te digo trigo por no llamarte Rodrigor me cago en tus muelas. La caidita no te digo trigo por no llamarte Rodrigor fistro diodenoo.</p> </div> <h2>Desplegable 2</h2> <div class="plegable"> <img src="480x240.png" alt=""> <p>Lorem fistrum no te digo trigo por no llamarte Rodrigor quietooor a gramenawer me cago en tus muelas fistro qué dise usteer pecador sexuarl no te digo trigo por no llamarte Rodrigor me cago en tus muelas. La caidita no te digo trigo por no llamarte Rodrigor fistro diodenoo.</p> </div> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.plegable{ max-height:0; overflow:hidden; -webkit-transition: max-height 500ms ease-out; -moz-transition: max-height 500ms ease-out; -o-transition: max-height 500ms ease-out; transition: max-height 500ms ease-out; } .plegable.desplegado{ max-height:500; -webkit-transition: max-height 500ms ease-out; -moz-transition: max-height 500ms ease-out; -o-transition: max-height 500ms ease-out; transition: max-height 500ms ease-out; } |
JAVASCRIPT
|
1 2 3 4 5 6 7 8 9 |
$(window).ready(function(){ $('h2').click(function(){ if($(this).next().hasClass('desplegado')){ $(this).next().removeClass('desplegado'); }else{ $(this).next().addClass('desplegado'); } }) }) |
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
|
1 2 3 4 |
.plegable{ height:0; overflow:hidden; } |
JAVASCRIPT
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
jQuery.fn.animateAuto = function(prop, speed, callback){ var elem, height, width; return this.each(function(i, el){ el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body"); height = elem.css("height"), width = elem.css("width"), elem.remove(); if(prop === "height") el.animate({"height":height}, speed, callback); else if(prop === "width") el.animate({"width":width}, speed, callback); else if(prop === "both") el.animate({"width":width,"height":height}, speed, callback); }); } $(window).ready(function(){ $('h2').click(function(){ if($(this).next().hasClass('desplegado')){ $(this).next().removeClass('desplegado').animate({height:0},500); }else{ $(this).next().addClass('desplegado').animateAuto("height",500); } }) }) |
Podéis ver los ejemplos en movimiento aquí: