Expandir y contraer cualquier gadget

Habíamos visto antes como expandir y contraer el gadget de "Etiquetas" usando un sencillo script y poco después también vimos como hacerlo con los gadgets de "Archivos" y "Feed".



Me ha llegado un email de Woody Jagger donde me pregunta como hacer esto mismo con cualquier otro gadget (Perfil, Archivos, Lista de Blogs, etc.), así que vamos a ver como aplicar el efecto de "expandir y contraer" a cualquier otro gadget de los que incluimos normalmente en la sidebar.

Una vez que incluimos uno de estos gadget, en la parte de "Edición HTML" de nuestro panel y expandiendo las plantillas de artilugios, podemos ver que la estructura de cualquiera de los gadgets añadidos es muy similar, en algunos casos idéntica  o  parecida a esta:

<b:widget id='Text1' locked='false' title='Bienvenidos' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Para aplicar este script en cualquiera de estos gadget, solo tendremos que fijarnos bien en que parte hemos de añadir las piezas de código que componen el script y que, en todos los casos, es el mismo código (el resaltado en negrita):

<b:widget id='Text1' locked='false' title='Bienvenidos' type='Text'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
<data:content/>
</div>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Si queremos sustituir el símbolo de expandir y contraer [+/-] por una imagen, colocamos directamente en su lugar el código para mostrar la imagen:

<img src="url_de_la_imagen"/>

Ver ejemplo funcionando