Expandir y contraer gadget con Scriptaculous

Después de haber visto con anterioridad como expandir y contraer cualquier gadget usando algo de javascript, vamos a ver ahora como hacer eso mismo usando Scriptaculous y Prototype lo que añadirá al gadget un efecto "deslizante" muy elegante.


[1] En primer lugar tenemos que incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la entrada al respecto, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso:

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Todos los gadget mantienen prácticamente la misma estructura en su código, con lo que no nos será muy difícil incluir el código necesario para conseguir el efecto.
En "Edición HTML" de nuestro panel, marcamos la casilla de "expandir las plantillas de artilugios" y localizamos el gadget que nos interesa por la línea de código que marca su comienzo y en la que podemos ver su título:

<b:widget id='HTML4' locked='false' title='Posts populares' type='HTML'>

[3] Una vez localizado el gadget, añadimos estas líneas de código que veis en negrita tomando como referencia el resto de código del gadget:

<b:widget id='HTML4' locked='false' title='Posts populares' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;POPULARES&quot;,&quot;slide&quot;); return false'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/> &#9660;</h2></b:if>
</a><div align='center' id='POPULARES' style='display: none;'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Notas:

Yo he usado el símbolo &#9660;, es decir el triangulo ▼ que veis a la derecha de los títulos en los gadget con el efecto añadido.
Podéis sustituir ese código por [+/-] por ejemplo, e incluso por un icono: <img src="url_del_icono"/>

He destacado en color naranja la palabra POPULARES esa palabra es un "identificador único" es decir, solo puede usarse en un gadget concreto, así que será distinto en cada gadget que incluya el código y ha de ser idéntico en los dos lugares del código donde va colocado.

Ejemplo con el código añadido al gadget de etiquetas:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;Etiquetas&quot;,&quot;slide&quot;); return false'><b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/>&#9660;</h2></b:if>
</a>
<div align='left' id='Etiquetas' style='display: none;'>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=30&quot;'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div> </div>
</b:includable>
</b:widget>