Mostrar y ocultar - Expandir y contraer cualquier cosa en el blog

El truco de expandir y contraer elementos suele ser bastante apreciado en el mundo del blogger, ya que resulta de bastante utilidad para acortar alguna entrada, evitar que el blog tarde en cargar, hacer una navegación más cómoda...

Nosotros hemos aprendido a expandir y contraer las entradas en las páginas de etiquetas ^[+], a hacer que el contenido de los gadgets (elementos de página) pueda desplegarse o recogerse ^[+] o a conseguir un efecto deslizante que muestra u oculta cualquier elemento ^[+].

Pero en esta entrada aprenderemos el truco de "expandir y contraer" básico, el más sencillo y el que mejor suele adaptarse al tiempo de carga de un blog.

Aunque después veremos algunos ejemplos, vamos a empezar la instalación.

Diseño>Edición de HTML>expandimos artilugios

Texto oculto con enlace para visualizarlo

Busca la etiqueta </head> y añade este script encima:

<script type='text/JavaScript'>
function blmostrocult(blconted) {
var c=blconted.nextSibling;
if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none';
}
return false;
}
</script>

Ahora guarda la plantilla:



Dirígete al lugar en el que deseas insertar el enlace "mostrar - ocultar", ya sea una entrada o un gadget (elemento de página) que encontrarás en el apartado de Diseño.

Este es el código que vas a necesitar siempre que desees hacer uso del truco:

<a onclick="return blmostrocult(this);" style="cursor: hand; cursor: pointer;">TITULO</a><div style="display: none;">
CONTENIDO OCULTO
</div>

Simplemente debes reemplazar TITULO por el texto que llevará el enlace y CONTENIDO OCULTO por el texto, la imagen o cualquier cosa que desees ocultar.

Al ser tan sencillo y rápido, este truco puede usarse para infinidad de cosas. Seguidamente puedes ver algunos ejemplos...

- Un ejemplo con texto

Este es el texto que permanecerá oculto antes de que el lector pulse sobre el enlace. Como puedes ver, resulta de mucha utilidad el poder recoger secciones del blog. Escribir un mensaje, una advertencia o simplemente dividir tus artículos para que tu bitácora cargue con rapidez sería una idea magnífica.

- Un ejemplo con imágenes

Texto visible con enlace para ocultarlo

Probablemente lo que desees no sea mantener el contenido oculto y que, al hacer clic en el enlace, quede visible. Puede que prefieras mantener un texto a la vista y que, si el lector lo desea, pueda ocultarse...

- Ocultar el texto

Este es el texto que permanecerá visible antes de que el lector pulse sobre el enlace y lo oculte. Como puedes ver, resulta de mucha utilidad el poder recoger secciones del blog. Escribir un mensaje, una advertencia o simplemente dividir tus artículos para que la bitácora cargue con rapidez sería una idea magnífica.

Para ello, utiliza este script en lugar del anterior (insertándolo en el mismo lugar):

<script type='text/JavaScript'>
function blmostrocult(cual) {
var c=cual.nextSibling;
if(c.style.display==&#39;block&#39;) {
c.style.display=&#39;none&#39;;
} else {
c.style.display=&#39;block&#39;;
}
return false;
}
</script>

Y este otro código para activar el truco:

<a onclick="return blmostrocult(this);"><span style="font-style: italic;">OCULTAR</span></a><div style="display: block;">
CONTENIDO
</div>

Reemplazando OCULTAR por el texto del enlace y CONTENIDO por el texto, imagen o artilugio.

Notas:

Para no tener que estar copiando el código que inserta el enlace para expandir y contraer secciones del blog, haz uso de la plantilla de entrada ofrecida por blogger.

En caso de querer utilizar una imagen o un botón como enlace para desplegar o recoger elementos, reemplaza en el segundo código, TITULO por este código:

<img src="URL DE LA IMAGEN"/>

En donde dice URL DE LA IMAGEN, inserta la dirección del icono ^[+].