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

24 Comentarios

  1. 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.

  2. 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.

  3. Hola. Gracias por el código. Me ha sido muy útil y da un resultado muy aparente. ;)

    Fuerza y honor…

  4. 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

  5. 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. :(

  6. […] Div plegable/desplegable: Artículo escrito por mi donde explico como conseguir el mencionado efecto con el uso de un script proporcionado por dynamic drive. En el artículo explico de forma simple como conseguir un cajón que se despliega y pliega al picar sobre un botón. […]

  7. Excelente, hace 3 dias descubri el sitio y se encuentra mucho y es muy utilizable en webs, este div lo voy a utilizar en una web que tengo como proyecto personal, gran aporte.

    Rodo fijate que yo lo uso en IE, quiza hallas colocado mal la ruta del .js
    Fijate que mantenga su ruta, no es tan complicado, solo tiene ese archivo.

  8. Muy buen efecto javascript. Es estupendo, me ayudo a solucionar algunos problemas que tenía con mi página web!

  9. Buen post, fue de mucha utilidad.

    El true/false al final es para que el menu conserve el estado de abierto o cerrado después de hacer clic en el enlace, pero tiene un comportamiento extraño al menos en firefox 3. si se pone en falso siempre aparece cerrado.

    Saludos

  10. Pues a mi me pasa igual que a Rodo.
    En firefox perfecto, en explorer hace los movimientos de Expansión y pliegue, pero al final el div siempre permanece visible.

  11. Soluciono mi propio error y el de Rodo:

    Se me había olvidado añadir la cabecera “<DOCTYPE….” al documento html.

    Sin ella en firefox funciona, pero en explorer no.

    Un saludo.

  12. UNA GRAN DUDA me funciona perfecto en Firefox 3 pero en IE6 no sale el efecto de despliegue, simplemente se ven todos los textos y cuando quiero ocultar me sale el mensaje ” please wait until document has fully loaded then click again ” alguien respondame plzz pork los k van a ver los textos trabajan bajo IE6!!!!

  13. Muy buena libreria y muy facil de usar, muchas gracias por este aporte. Me va a ser muy util en mi proyecto.

  14. Hola. Me parece muy bueno el recurso y el tutorial. Sin embargo, tengo una duda: si necesito poner varios divs desplegables en la misma página, no podría utilizar el mismo id en varias instancias, porque eso rompe con las normas de código válido W3C, y también con la función natural del id, que es ser único. Si pongo varios id, tendría que poner una función por cada uno, y en el caso que tengo, serían muchos. ¿Se puede usar también con el atributo class? Probaré, pero dejo la inquietud por si sirve de algo.

  15. Hola,

    Muy útil el tutorial, lo he realizado y agregé algunos combios con java, vereis, estoy haciendo una web y tengo un menú con flash de modo que los botones llaman a través de getURL a funciones javascript de la web.
    He incorporado animatecollapse y el flash llama ha estas funciones com he explicado antes. Lo que hace es cerrar los divs que yo le digo y abrir solo uno.
    El problema es que me funciona en todos los navegadores(“Mozilla”,”chrome”,”opera”) pero en el maldito Internet Explorel no…
    Me lo h estado mirando y creo que es por algo de esta franja de codigo:

    var collapse1=new animatedcollapse.addDiv(“cata”,300,false,”block”);

    Si lo hago con html, con links, funciona, pero desde flash no… Y una cosa que me sorprendio era que si quitaba de este codigo:

    var collapse1=new animatedcollapse.addDiv(“cata”,300,false,”block”);

    el false o true y el block, solo me iba uno de los links.

    el codigo total es este:

    flash:

    on (press) {
    getURL (“javascript:collapse1.slideup()”);

    }
    on (press){
    getURL (“javascript:collapse2.slideup()”);

    }
    on (press){
    getURL (“javascript:collapse3.slidedown()”);

    }
    on (press){
    getURL (“javascript:collapse4.slideup()”);

    }

    javascript:

    var collapse1=new animatedcollapse(“cat”, 300, false, “block”)
    var collapse2=new animatedcollapse(“cat2”, 300, true, “block”)
    var collapse3=new animatedcollapse(“cat3”, 300, true, “block”)
    var collapse4=new animatedcollapse(“cat4”, 300, true, “block”)

    haber si me podeis ayudar, gracias :D

  16. Hola, me parece muy interesante la librería pero me gustaría que el contenedor se desplegara hacia un lado y no hacia abajo, si me puedes decir como modificar la librería para hacer esto te lo agradecería mucho.

    Gracias.

  17. Hola, otra ves yo, el problema anterior ya lo solucione, ahora me gustaría saber como hacer que cuando abra la pagina el div no este desplegado completamente sino que la animación comience apenas entre, es decir que yo entre y el div automáticamente se empiece a desplegar poco a poco.

    Gracias.

Dejar respuesta

Please enter your comment!
Please enter your name here