Mostrar/ocultar contenido en nuestro sitio ~ Tube trucos

Una forma mas de mostrar/ocultar el contenido de un gadget, de una parte de la entrada etc... Esta vez, usaremos un efecto deslizante, un efecto slide que podremos aplicar a un gadget o en alguna parte de una entrada. aparte de slide tambien esta (appear y blind) pero es mas elegante el efecto slide.

Primeramente antes de comenzar, debemos tener en cuenta que si ya tenemos el código de Prototype y Scriptaculous en la plantilla.solo es necesario incluirlo una vez, por lo que si ya lo tienes, podrás saltarte el siguiente paso.

1) Debes pegar este script antes de la etiqueta </head>

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

Una ves puesto el codigo guarda la plantilla

2) Una vez tengas el script instalado, ya podrás aplicar el efecto a cualquier parte de tu blog, ya sea en una entrada o en un gadget.

Este es el código para usar el efecto deslizante con un enlace de texto:

<div style="margin-left: 30px;"><a style="color: #999999; " href="javascript:void(0);" title="Clic para desplegar" onclick="new Effect.toggle('elemento1','slide'); return false">Mostrar el contenido</a></div>
<div id="elemento1" style="overflow: visible; text-align: justify; display: none;">
CONTENIDO OCULTO
</div>

Mostrar el contenido▼▲

Si lo que decean es poner en lugar de un texto que diga mostrar el contenido a una imagen entonces deben poner el siguiente codigo:

<div style="margin-left: 30px;"><span ><a style="color: rgb(153, 153, 153); " href="javascript:void(0);" title="Clic para desplegar" onclick="new Effect.toggle('elemento2','slide'); return false"><center><img src="URL DE TU IMAGEN"/></center></a></span></div><div id="elemento2" style="overflow: visible; text-align: justify; display: none;">
CONTENIDO OCULTO
</div>

Den click a la imagen para ver el efecto:

MOSTRAR EL CONTENIDO por la frase o texto que actuará como enlace para desplegar el contenido.

CONTENIDO OCULTO por cualquier cosa que desees ocultar. Puede ser un código, un bloque de texto, una tabla, una imagen un video lo que quieras

URL DE TU IMAGEN por la imagen que actuará como botón para desplegar el contenido.

Donde dice elemento1 elemento2 pueden cambiarlo por el nombre que quieran pero nunca se puede repetir para que no ocasione comflictos ejemplo cada ves que quieran poner el codigo seria asi elemnto1 elemento2 elemnto3 elemnto4 etc... si me entienden no se puede repetir el mismo nombre.

Bueno es todo recuerden que compartir y comentar no cuesta nada si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código lo podrán ver muchas gracias.