Div plegable/desplegable

Otro de los efectos que están pegando bastante últimamente es el de poder mostrar información en un div que podamos desplegar o contraer con un botón, muy practico, simple de aplicar y con un resultado visual bastante bueno. En dynamic drive han hecho una librería para conseguir este fin, vamos a ver aquí como funciona explicándolo en la lengua de Cervantes. Una DEMO para ver los resultados.

Lo primero creamos una carpeta con el nombre divplegable (o el que cada uno quiera) dentro de la cual hacemos otra de nombre js y descargamos la librería (usar botón derecho “guardar enlace como”). Cuando la tengamos la movemos a su carpeta, la que hemos llamado js. Creamos un archivo .html y lo guardamos en la carpeta divplegable.

Dentro del html las primeras líneas que añadiremos serán para llamar la librería e indicamos un doctype strict:

[html]

[/html]

Para hacer funcionar la librería, el sistema siempre es el mismo y tenemos tres opciones: que la caja tenga un botón para desplegar y otro para contraer, que con el mismo botón se hagan las dos acciones y que el cajón se muestre desplegado desde un principio con la opción de poder contraerlo y desplegarlo.

Dos botones, uno para desplegar y otro para contraer:

[html]

Ejemplo 1:

Despliega || Contrae

Lorem ipsum dolorem incorrupte te mei, quo no eius docendi. Euripidis rationibus comprehensam cu has, ut sed ignota tritani,


[/html]

De estas líneas lo interesante es href=”javascript:collapse1.slidedown()” con la que se hace el botón para desplegar y con href=”javascript:collapse1.slideup()” para el botón contraer. Seguido se crea el div al que se le da un ID que será la que luego pasaremos al script para hacer el efecto. También es importante darle un alto con height que será el largo del div cuando se despliegue. El script que está justo debajo del div es el encargado de lanzar la librería y su sintaxis siempre es la misma: se le pasa el nombre de la variable única (en este caso collapse1), se hace un nuevo slide y se le pasa el ID del div. El numero es la velocidad con la que se contraerá/desplegará el div y el ultimo parámetro puede ser true o false pero sinceramente no se que hace exactamente.

Un único botón para desplegar y contraer:

[html]

Ejemplo 2:

Despliega/Contrae

Titulo

Lorem ipsum dolorem incorrupte te mei, quo no eius docendi. Euripidis rationibus comprehensam cu has, ut sed ignota tritani, hinc habeo euripidis et mea. An porro putent mentitum vis, elit nostrum te sed, per eu cibo magna propriae. Sed cu iudico voluptaria, te usu nemore officiis partiendo.


[/html]

Todo igual que en el caso anterior, solamente cambiamos la función href=”javascript:collapse2.slideit()” que sirve para poder contraer y desplegar con un solo botón.

Cajón desplegado desde un principio con opción desplegar/contraer:

[html]

Ejemplo 3:

Despliega || Contrae

Lorem ipsum dolorem incorrupte te mei, quo no eius docendi. Euripidis rationibus comprehensam cu has, ut sed ignota tritani, hinc habeo euripidis et mea. An porro putent mentitum vis, elit nostrum te sed, per eu cibo magna propriae. Sed cu iudico voluptaria, te usu nemore officiis partiendo.


[/html]

Se añade el parámetro block para que el cajón este desplegado desde un principio, todo lo demás igual que en los casos anteriores. Se podría mostrar un solo botón usando slideit().

Enlace: Animated Collapsible DIV

Ir arriba