BLOGGER - Ver u ocultar texto o imágenes

By JorgeLanz 🐧✌️🇦🇷 |

sábado, 21 de febrero de 2009

Script "ver/ocultar" - 21/02/2009


Un método sencillo para contraer y expandir elementos es un script muy simple que aprovecha la instrucción nextSibling.

El código a insertar en el encabezado del blog, por ejemplo, antes de la etiqueta </head> es el siguiente:

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

Para que funcione, utilizamos un enlace de cualquier tipo, puede ser un texto o una imagen:

Me preguntaron por algún método sencillo para contraer y expandir elementos y lo primero que se me ocurrió fue algo similar a lo que utilizo habitualmente, un script muy simple que aprovecha la instrucción nextSibling.

El código a insertar en el encabezado del blog, por ejemplo, antes de la etiqueta </head> es el siguiente:

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

Para que funcione, utilizamos un enlace de cualquier tipo, puede ser un texto o una imagen:

<a onclick="return verocultar(this);"
href="javascript:void(0);">ENLACE</a><div style="display: none;">
....... el contenido a ocultar .......
</div>

donde lo único importante es que todas las instrucciones desde A hasta DIV, se escriban en una sola linea. Aquí hay dos ejemplos, uno utiliza un enlace de texto y el otro una imagen. En cualquier caso, el contenido puede ser cualquier cosa.

Acá tienen un ejemplo utilizando una imágen y un texto cualquiera :

Ver/Ocultar [+/-]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.

(fuente)