Efecto deslizante (slide) para entradas expandibles

Usando este efecto las entradas se abren y se cierran con un efecto deslizante muy agradable y que además es muy sencillo de incorporar a los títulos de las entradas expandibles, tanto si estamos usándolas en la página principal, como en las páginas de etiquetas.


[1] Para aplicar el efecto deslizante, necesitamos usar las librerías (Prototype y Scriptaculous) de las que hablamos en una entrada anterior.

[2] Estas librerías las incluimos en la plantilla con un script de Google API y tendremos que añadirlo justo antes de </head>:

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

[3] Localizamos ahora con los artilugios expandidos, esta línea que forma parte del código que habíamos añadido para nuestras entradas expandibles:

<a expr:onclick='&quot;javascript:toggleIt(&quot;&quot; + data:post.id + &quot;&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>

[4] La sustituimos por esta otra línea y guardamos los cambios:

<a expr:onclick='&quot;Effect.toggle(\&quot;&quot; + data:post.id + &quot;\&quot;,\&quot;slide\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>

Podéis comprobar el resultado pinchando en el [+/-] que acompaña al título de mis entradas expandibles en las páginas de etiquetas.