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.
Por supuesto es absolutamente editable, y si se agrega la librería para efectos scriptaculous, se pueden tener muchas posibilidades para nuestro elemento colapsable.
3 comentarios en “Colapsable”
1
Javiera Ruiz
19/2/2008 | 10:26 amBasi!!!
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
Javiera Ruiz
19/2/2008 | 11:07 amtuve 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
Ivan
25/5/2008 | 7:31 amhola 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
