Esconder el contenido de los gadgets tras un [+/-]

Llevaba varios días dándole vueltas a una idea: Hacer que las listas de enlaces del Directorio se mostraran encogidas, que solo se viera el título y un [+/-] o algo parecido, para expandirlos. De esta forma, pensé, el blog sería menos mareante para quien entre en busca del enlace a alguna entrada, ya que están todas bien catalogadas en distintas listas. (Los que lo usais ya me entendeis).

Esto también me permitiría volver a dejarlas en solo 3 columnas, con lo que cada enlace, o la mayoría de ellos, estaría en una sola línea.

Probé el truco de las librerias y el efecto toogle, pero, por alguna extraña razón que no he logrado averiguar, no me funcionó ni allí ni aquí.

He buscado información acerca de ésto, he mirado el código fuente de algunos blogs que lo tienen, pero en los mios este truco se limita a llevarme arriba sin abrir el gadget.
Incluso le escribí a gem@ a ver si ella podía echarme una mano, pero no hubo forma de arreglarlo, así que estaba a punto de dejarlo por imposible.

Pero soy muy tozuda y cuando algo se mete entre ceja y ceja no paro hasta lograrlo, así que hoy se me ha ocurrido una idea: En este mismo blog tengo el gadget de etiquetas encogido, ¿sería posible utilizar ese mismo código para otros gadgets?.

Lo he probado, pero al principio no me ha funcionado, así que he investigado un poco y en el blog de Rosa he encontrado la solución.

La he aplicado a todos los gadgets del directorio y ¡ha funcionado!.
Ya tengo todos los gadgets de ese blog bien recogiditos ocupando el mínimo espacio y si alguien necesita buscar el enlace a alguna de mis entradas, aparte de que puede usar el buscador, que funciona tan bien que muestra incluso las entradas que aún no he añadido a las listas, puede desplegar tan solo la lista que le interese o en la que crea que pueda estar lo que busca, sin tener que ver los tropecientos enlaces que hay al mismo tiempo, con lo que será menos mareante para el o ella.

EDITO: Hoy puedes ver el mismo truco aquí, aplicado a varios gadgets, Archivo, Etiquetas, Lista de Blogs yTexto. El sistema es exactamente el mismo en todos ellos.

Solo has de tener en cuenta que en el gadget de etiquetas hay una pequeña variación que mencionaré en la explicación.

Así que si te interesa, pincha y verás


Lo primero de todo que has de hacer, antes de empezar es EXPANDIR PLANTILLA DE ARTILUGIOS, (ya sabeis, marcar ese cuadrito que hay justo encima del recuadro del código, a la derecha y esperar un segundo a que el código recargue para empezar a buscar).

Y lo remarco bien, así en mayúsculas y en negrita, porqué no quiero que luego me vengais con "No encuentro eso que dices" porqué os garantizo que lo que os voy a decir está en todos los gadgets.

Absolutamente en todos.

Una vez expandidos buscais el gadget que querais encoger. Si tiene título os será más fácil de encontrar, pues buscando ese título lo encontrareis. (Control F y os aparecerá la barrita para buscar algo en el código. Arriba, abajo, a la derecha o a la izquierda de la pantalla, dependiendo del navegador, pero os saldrá. Y si no tiene título ponédselo o solo se verá el [+/-] y nadie sabrá qué es lo que hay detrás.

Una vez localizado el título fijaos bien en lo que hay. Porqué hay 3 líneas que son claves para colocar el código que hará que se encoja y se vea como los de allí.

Las líneas son:

<b:includable id='main'>

<div class='widget-content'>

<b:include name='quickedit'/>

El resto del código del gadget puede variar, dependiendo del tipo de gadget que sea, pero estas 3 están en todos.

Así que con estas 3 líneas localizadas hay que añadir 3 códigos al código del gadget.

El primero va justo debajo de la primera línea que menciono y es este:

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

El segundo va justo debajo de la segunda línea que os he dicho y es éste:

<script type='text/javascript'>
//<![CDATA[document.write('<div id="' + rnd + '"
style="display:none;">');//]]>
</script>

Y el tercero va justo encima de la tercera línea que os digo y es éste:

<script type='text/javascript'>
//<![CDATA[document.write('<\/div>');//]]>
</script>

Independientemente de lo que quede, del código original, entre estos códigos, ya que cada tipo de gadget tiene sus propios códigos para funcionar.

Tan solo os teneis que fijar y basar en esas 3 lineas concretas que menciono al principio y pegar estos 3 códigos, en el lugar exacto que os digo.

En el gadget de etiquetas la segunda línea se ve algo distinta. Pero si te fijas bien en realidad pone lo mismo, solo que más largo, ya que se ve así:

<div expr:class='"widget-content " + data:display + "-label-widget-content"'>

Fíjate que remarco lo que hay en los otros gadgets.

Variantes de este tema:

Haciéndolo así el [+/-] queda a la izquierda y es posible que os quede encima del título del gadget.

Si quereis ponerlo a la derecha cambiais el left que he remarcado en rojo en el primer código por right.

Y si en lugar de ese [+/-] quereis poner una flechita o algo similar, (no muy grande, o no se verá, máximo unos 36 pixels), cambiais el [+/-] que he remarcado en rojo por <img src='ladirección de la imagen' /> y se verá la imagen.

En el directorio, si vais a chafardear un poco, vereis que yo he colocado una doble flechita verde a la derecha.

Imprime esta entrada