Expandir y contraer partes de un post con Scriptaculous

Expandir/contraer
Antes ya vimos como expandir y contraer cualquier gadget usando el efecto "slide" de Scriptaculous.

En esta ocasión vamos a ver como usar el mismo efecto para expandir y contraer partes de las entradas.


[1] El primer paso es incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la entrada sobre Scriptaculous, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso.

Colocamos el código antes de </head>:

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Una vez hecho esto, ya podemos usar el efecto en cualquier entrada, para aplicarlo tenemos que añadir unas líneas de código en la parte de la entrada que vayamos a mantener oculta hasta que pinchemos sobre el texto que usemos como "enlace":

<a href='#' onclick='Effect.toggle("UNO","slide"); return false'>Texto enlace &#9660;</a><div id='UNO' style='display: none;'>

Aquí la parte oculta de la entrada

</div>


Notas:
Fijaros que en el código aparece dos veces la palabra "UNO", esa palabra es la id del <div> y tendrá que ser distinta cada vez que usemos el código para que el efecto funcione sin problemas.

Procuraremos incluir el código una vez editada la entrada desde la pestaña "Edición de HTML" del editor y publicar directamente desde ahí, sin volver a la pestaña "Redactar".


EJEMPLO (Texto enlace) ▼

0 comentarios:

Publicar un comentario