Ocultar texto con Javascript y DOM

Estuve viendo por ahí que varias personas estaban preguntando cómo ocultar texto o cosas similares, así que aquí les dejo este tip al respecto.

Digamos que tenemos un párrafo 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.

Código :

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:

Código :

   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 variable 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 párrafo 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.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.