Me han preguntado un par de lectores con blog cómo se hace para meter en HTML un texto que pueda ocultarse y mostrarse apretando un link, como yo hago en varios posts largos. La mayoría de las veces, en mi blog y los otros, eso lo provee el motor (Movable Type, Blogger con limitaciones, Nucleus, WordPress): generalmente el texto que uno mete como «texto extendido» (o algo así), automáticamente aparece en la página como texto oculto.
Pero, para los que no pueden o no quieren usar esta funcionalidad, (y quieren quizás ocultar partes arbitrarias del texto), les paso un cacho de código Javascript que hice. Es para cualquier página html —independientemente del sistema de blog— y que creo que funciona bien [*] en cualquier navegador más o menos moderno.
[*] Actualizado: Más o menos bien: agego algunos trucos para Blogger y otros…
Primero hay que meter (por unica vez), preferentemente en el «Header» de la página (eso lo pueden hacer tocando el «template», al principio de la página, luego del tag <head>) lo siguiente:
<script type="text/javascript" language="JavaScript">
// texto oculto, se muestra apretando un link
// Hernán J. González - http://www.hjg.com.ar/
function verocultar(href) {
var c = href.nextSibling;
if(c.style.display == 'none')
{ c.style.display = 'block'; href.innerHTML ='[-]'; }
else
{ c.style.display = 'none'; href.innerHTML ='[+]'; }
return false;
}
</script>
Después todo lo que hay que hacer para hacer un texto «ocultable», es rodearlo de unos tags:
...aca vá texto visible... bla bla bla... <a onclick="return verocultar(this);" href="#">[+]</a><div style="display:none"> ...acá va el texto oculto... </div> ...acá sigue texto visible...Es verdad que no es tan simple como uno quisiera, pero la idea es tener ese engendro html (lo que está en negrita) a mano, para copiar y pegar.
Ojo, es importante que todo lo que sigue al href=»#» hasta el display:none» quede en una sola línea.
Vamos a probarlo …
Bla bla bla… esto es texto siempre visible … bla bla bla
[+]
Acá sigue el texto siempre visible… bla bla bla
[+]
Como ven, tenemos dos textos diferentes ocultables en el mismo post.
[+]
Acá sigue el texto siempre visible… bla bla bla
[+]
Como ven, tenemos dos textos diferentes ocultables en el mismo post.
Actualizado: Algunos problemas detectados en Blogger (aplicables a otros casos). Los que usan el modo de «saltos de línea automático»: escribir todo el conjunto de tags inicial, desde <a onclick= hasta «display:none»> en una sola línea.
Cuidar al máximo la «corrección» del código html en el post en cuestión, sobre todo en el texto oculto, según las reglas de xhtml. Todo elemento debe, o bien tener un tag de apertura y otro de cierre (por ej; <b> …</b>) o bien incluir espacio-barra al final: (por ej: <br /> ).
También se recomienda poner todos los atributos de un tag entre comillas (por ej: <img src=»ad.jpg» width=»34″ height=»343″ /> ). Preferir los tags de <div> (o <br /> para simples saltos de líneas) a los tags de párrafo <p>.