Div plegable/desplegable
Escrito por Elías el 4 de Octubre de 2007
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 xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="js/animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
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:
<a href="javascript:collapse1.slidedown()">Despliega</a> || <a href="javascript:collapse1.slideup()">Contrae</a>
<div id="dog" style="width: 300px; height: 110px; background-color: #97bf21;">
<!--Your DIV content as follows -->
<p>Lorem ipsum dolorem incorrupte te mei, quo no eius docendi. Euripidis rationibus comprehensam cu has, ut sed ignota tritani,</p>
</div>
<script type="text/javascript">
var collapse1=new animatedcollapse("dog", 1000, false)
</script>
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:
<a href="javascript:collapse2.slideit()">Despliega/Contrae</a>
<div id="cat" style="width: 300px; background-color: #97bf21;">
<div style="padding: 0 5px">
<h3>Titulo</h3>
<p>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.</p>
</div>
</div>
<script type="text/javascript">
var collapse2=new animatedcollapse("cat", 800, true)
</script>
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:
<a href="javascript:collapse3.slidedown()">Despliega</a> || <a href="javascript:collapse3.slideup()">Contrae</a>
<div id="fish" style="width: 300px; height: 150px; background-color: #97bf21;">
<p>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.</p>
</div>
<script type="text/javascript">
var collapse3=new animatedcollapse("fish", 300, false, "block")
</script>
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
Publicado en: 
Muy útil, gracias !
Algún día de estos seguro que me viene bien para alguna web. Lo guardo en favoritos
A mandar luigix. Sigo tu blog desde que lo conocí cuando hice el recopilatorio del meme 3 consejos para ser un buen blogger, un placer haberlo descubierto. Un saludo.
Hola tengo problemas implementado el codigo en el tipo de URL http://www.talweb.com/?s=productos por ejemplo.
No tengo ni idea de que puede ser. Entra en la página de los creadores y mandales un mail comentándoles lo que te pasa a ver si te contestan.
Un saludo.
Hola. Gracias por el código. Me ha sido muy útil y da un resultado muy aparente.
Fuerza y honor…
De nada Choose. Un saludo
interesante efecto, pero me gustaria intentar hacer colapsable el menu, pero sin depender de un click, sino de un onload, espero su ayuda porque me ha salido dificil modificarlo de esa manera
Hola me parecio muy bueno este articulo, pero tengo un problema con IE, en mozilla funciona perfecto ;). pero el IE siempre permanece visible, hace el efecto de pliego pero se mantiene visible.