Ocultar texto con Javascript y DOM

Hay muchas personas que buscan cómo ocultar texto al hacer click en un botón o en una liga. Y no nada más texto, también imágenes y demás. Por eso escribí este pequeño TIP.

Digamos que tenemos un parrafo como este y que queremos ocultar sólo una parte del mismo. Simplemente colocamos una etiqueta span entre el contenido que deseamos desaparecer. (Este tip funciona con cualquier tipo de etiqueta HTML).

Supongamos que este es el código HTML dónde está la parte que queremos esconder.

Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. <span id="contenidos_2">Sed mattis enim vitae orci. Phasellus
libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo
ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et,
luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae,
ultrices porttitor, pede.</span> Nullam sit amet nisl elementum elit convallis
malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non,
mi. < span id="contenidos_1">Duis pellentesque, felis eu adipiscing ullamcorper, odio urna
consequat arcu, at posuere ante quam non dolor. Lorem ipsum, dolor sit
amet, consectetuer adipiscing elit. Duis scelerisque.</span> 

<a id="enlace_1" href="#">Ocultar contenidos</a> 1
<a id="enlace_2" href="#">Ocultar contenidos</a> 2

Si se fijaron, las etiquetas span tienen un id, esto es necesario para poder detectar con DOM qué es lo que se quiere ocultar o descubrir, también los links tiene su propio id. Todos tienen un nombre diferente, pero tienen un número similar al final, esto es para que si tenemos más de una sección que queremos ocultar y develar con otro link, se pueda usar el mismo código, incluso con otras etiquetas HTML.

Ahora, el truco está con el código Javascript siguiente:

function interruptor() {
      numero = this.id.charAt(this.id.length-1);
      parrafo = document.getElementById("contenidos_" + numero);
      liga = document.getElementById("enlace_" + numero); 

      switch(parrafo.style.display) {
         case "inline"   :
         case ""         :   parrafo.style.display = "none";
                        liga.innerHTML = "Mostrar Contenido";
                        break;
         case "none"      :    parrafo.style.display = "inline";
                        liga.innerHTML = "Ocultar Contenido";
                        break;
      }
   }
   window.onload=function(){
      var enlaces = document.getElementsByTagName("a");
      enlaces[0].onclick=interruptor;
      enlaces[1].onclick=interruptor;
   }

Primero tenemos una función interruptor, que va a ser la función que ocultará el texto.

numero va a obtener es el número que pusimos al final del id del link al que se le dió click.

parrafo va a obtener el elemento que concuerde con el id que se llame contenidos_ y que además tenga el numero igual al que guardamos en la varibale numero

liga va a hacer referencia al id que tenga por nombre enlace_ y el número que guardamos en numero.

El switch lo que hará es cambiar lo que se vé a simple vista, tanto del parrafo que queremos ocultar como el texto del link.

Al final, llamamos la función que creamos cuando se cargue la página con window.onload=function().

Creamos otra variable que se llame enlaces para guardar todas las etiquetas que tengamos con a en un arreglo y así poder llamar la función interruptor.

Y listo, ya podemos ocultar y volver a mostrar el texto al hacer click en los links.

2 Comments

Filed under Tips

2 responses to “Ocultar texto con Javascript y DOM

  1. Este también jala con wordpress? No me regañes por mi ignorancia, lo mio son los colores no los carácteres.

    Por cierto, bonito theme el que elejiste, es muy suave. ^_^

  2. daz_angie

    @Victor se supone que sí debe funcionar, checalo…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s