Ocultar y Expandir parte de una Entrada

Este truco nos permite ocultar texto, códigos, videos, imágenes, en una parte de la entrada, con la posibilidad de que los lectores de nuestro blog puedan expandirlas en el momento que lo necesiten.



Este truco lo puedes aplicar en entradas que son demasiado largas, así ahorrarás espacio y tu entrada no se verá interminable para el lector. Además ponerlo en tu blog es muy sencillo y demasiado fácil.



PROCEDIMIENTO:



Dirígete a Diseño > Edición de HTML y justo antes de </head> pegamos el siguiente código:



<!-- Prototype y Scriptaculous-->

<script src='http://www.google.com/jsapi'/>

<script>

google.load("prototype","1.6.0.3");

google.load("scriptaculous", "1.8.2");

</script>

<!-- Prototype y Scriptaculous-->



Es posible que ya tengas este código en tu plantilla, verifícalo si lo tienes salta este paso.

Ahora toca poner el código que oculta los elementos en la entrada, este código lo tienes que utilizar cada vez que apliques este truco en los post. Copia el siguiente código y pégalo en tu entrada en Edición de HTML No en Redactar:



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



Nota: Cada vez que utilices este efecto tienes que cambiar lo que está en verde "expandir1" que es el id del <div> y tiene que ser diferente cada vez que lo utilices por ejemplo: expandir2, expandir3, expandir4, etcétera.

Lo que está en color azul cámbialo por lo que quieres ocultar, ya sea texto, códigos, imágenes, videos, o  lo que quieras ocultar en tu entrada.