Colapsable

Están en todos lados… son lo más cool de lo cool… hijos directos de la Web 2.0, los famosos… can can can… colapsables. Bueno, como también me considero un seudo hijo de esta corriente, voy a explicar un poco como se hacen, a través de uno de los juguetitos regalones, Prototype.

Primero, comenzamos llamando esta librería javascript en el head de nuestro sitio

<head>
    <script type="text/javascript" src="http://www.isotipo.net/wp-includes/js/scriptaculous/prototype.js"></script>
</head>

Luego, tenemos nuestro pequeño código HTML donde describiremos el título de la página, un div contenedor, el ancla que despliega el div oculto con un conveniente id que será recogido para ejecutar la acción, y por supuesto, el div oculto, también con su respectivo id.

<body>
    <h1>Colapsable</h1>
    <div class="contenedor">
	<a href="#" title="ejemplo" id="colapsa">Despliegalo !!</a>
        <div id="oculto">
            <p>Texto dentro del contenedor que se colapsará y se desplegará.</p>
        </div>
    </div>
</body>

Pasando a nuestro texto en javascript, tenemos que:

    function ocultar(){
        if($('oculto')){
            $('oculto').hide();
            $('colapsa').href="javascript:mostrar()";
        }
    }
    function mostrar(){
        $('oculto').show();
        $('colapsa').href="javascript:ocultar()";
    }

    Event.observe(window,"load",ocultar);

, donde la funcion ocultar() define que si existe el id “oculto”, le otorga un display:none a través de la funcion hide() de prototype, al mismo tiempo que le dice al ancla con id “colapsa” que su comportamiento href sea llamar a la función mostrar(), que hemos creado nosotros. Luego, al hacer click en el ancla y ejecutarse la función mostrar, el div “oculto” se muestra a través de la funcion show(), y el ancla pasa a tener un comportamiento href que llama a la función ocultar(), que también hemos creado nosotros. Así, al volver a clickear en el ancla, se completa la recursividad del proceso.

Por último, cargamos nuestra funcion inicial ocultar() al final del script, a través del modo Event.observe() y .. can can can… , le tenemos un sencillo pero eficiente colapsable en Ajax.

Ver ejemplo

Por supuesto es absolutamente editable, y si se agrega la librería para efectos scriptaculous, se pueden tener muchas posibilidades para nuestro elemento colapsable.

Ver ejemplo

4 thoughts on “Colapsable”

  1. Basi!!!
    Bacan tu blog… lo uso miiil
    quiero hacer esto, pero con a:hover… necesito hacerlo!!!!

    Me puedes ayudar con esto?
    mándame un mail si sabes como… besos

  2. tuve problemas con el js… no me reconoce el javascript:Effect.toggle(‘oculto’,’slide’);texto()”;… no supe solucionarlo… asique no lo pude robar! jajajjaja
    besooooos

    (en el segundo ejemplo que das aca)

  3. hola tengo una dudilla, es que verás estoy haciendo una entrada con varias canciones y videos y debajo quiero poner las letras de las canciones. la cosa es que si en una misma entrada pongo más de una vez el código que compartiste, solo me oculta la primera. como podria soludionarlo??

    un saludo y disculpa mi ignorancia

  4. Hola muy buenos los scripts, podrías por favor publicar el mismo ejemplo del desplegable usando el scriptaculous y el prototype pero para dos o mas opciones a desplegar en el mismo archivo.

    Gracias.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>