Expandir y contraer cualquier gadget ~ La Popocha

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

<b:if cond='data:title != ""'>
<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("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; return false;" style="float:left;margin-right:5px;">');
//]]>
</script>[+/-]
<script type='text/javascript'>
//<![CDATA[
document.write('</a>');
//]]>
</script>

<b:if cond='data:title != ""'>
<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: