Expandir y contraer partes de una entrada con Scriptaculous

Este truco nos sirve para esconder cualquier parte de nuestra entrada, con la posibilidad de mostrarlos cuando el lector quiera. Sirve para ahorrar espacio cuando tenemos un elemento muy largo de una entrada, y podremos esconder imágenes, texto, video...


Este será el ejemplo con una imagen:

[+/-] Mostrar / Ocultar

Este será el ejemplo con un texto:

[+/-] Mostrar / Ocultar

Este truco nos sirve para esconder cualquier parte de nuestra entrada, con la posibilidad de mostrarlos cuando el lector quiera. Sirve para ahorrar espacio cuando tenemos un elemento muy largo de una entrada, y podremos esconder imágenes, texto, video...

Lo primero que haremos será ir a Diseño > Plantilla > Edición de HTML y pegamos lo siguiente justo antes de </head>

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

Antes de pegar el código anterior verificar si ya lo tiene vuestra plantilla, en caso de tenerlo omitir el paso.
Una vez tengamos el código en el html de nuestro blog lo siguiente será insertar el código que nos permitirá mostrar u ocultar los elementos de la entrada.

<a href='#' onclick='Effect.toggle("expandir1","slide"); return false'>[+/-] Ver / Ocultar</a><div id='expandir1' style='display: none;'>Aquí va el contenido que se ocultará</div>

Ten en cuenta que deberás de enumerar los diferentes elementos, es decir, el primer elemento será expandir1, el segundo expandir2, y así sucesivamente. Si hay varios elementos con el mismo número no os funcionará. Lo que está en color rojo será lo que tengamos que cambiar por lo que queramos insertar.

Y ya sabéis cualquier duda que tengáis o si necesitáis alguna cosa no dudéis en comentarlo y se lo solucionaré con mucho gusto.

Vía: El escaparate de Rosa