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:
[/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:
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:
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
