Expandir y contraer partes de una entrada

http://ciudadblogger.com/2009/10/expandir-y-contraer-partes-de-una.html

12 de octubre de 2009 | Publicado por El Potro | 214 comentarios

Este truco permite esconder partes de una entrada y con la posibilidad de mostrarlos cuando el lector quiera. Se puede esconder texto, imágenes o video y sirve para ahorrar espacio cuando tenemos un elemento muy largo dentro de la entrada.
Este es un ejemplo con una imagen:

[+/-] Ver / Ocultar

Lo mismo se puede hacer para un texto:

[+/-] Ver / Ocultar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec magna justo, eu dignissim odio. Nunc aliquam laoreet diam non eleifend. Mauris vehicula, mauris vel vehicula condimentum, neque sem congue diam, nec tempor tortor erat nec massa. Duis tempus, turpis in scelerisque blandit, eros leo bibendum odio, eu faucibus turpis justo ac orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean a purus vehicula sapien viverra eleifend. Praesent et nisi massa. Duis lacinia orci ac quam posuere nec scelerisque lectus sollicitudin. Sed eget vulputate turpis. Duis cursus mollis neque quis feugiat.

O incluso con un video:

[+/-] Ver / Ocultar

Primero vamos a Diseño > Edición de HTML y antes de </head> pegamos lo siguiente:

<!-- 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 lo anterior verifica si tu plantilla ya lo tiene, de ser así omite ese paso.
Lo siguiente será usar el código que es el que ocultará las partes dentro de un post. Así que cuando quieras ocultar algún elemento de la entrada deberás usar este código:

<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>

Toma en cuenta que donde dice expandir1 deberás cambiarlo cada vez que quieras usar este efecto, puedes modificarlos por expandir2, expandir3, etc. Lo que está en color rojo es el contenido que estará oculto, puede ser texto, imágenes, tablas, videos, etc. cualquier elemento que tengas dentro de un post podrás ocultarlo.

Por si Scriptaculous te dejó de funcionarhttp://ciudadblogger.com/2012/04/por-si-scriptaculous-te-dejo-de.html

5 de abril de 2012 | Publicado por El Potro | 152 comentarios

Desde hace un par de días a algunos les dejó de funcionar todo lo que requiere de la libreríaScriptaculous y Prototype.

Al parecer ha sido por una actualización de estas librerías que regularmente usamos desde las Librerías API de Google.

Si usas Scriptaculous y te ha dejado de funcionar busca en tu plantilla este código:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

Y cámbialo por este:

<!-- 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-->

Con ese cambio en el script deberá funcionar nuevamente todo lo relacionado con Scriptaculous y Prototype.

Gracias a AdelinaBasquet U.V.V.A. por el aviso.

Read more...