Sobre IDs y bloques ocultos

Cuando insertamos un bloque con cierto contenido, utilizamos una etiqueta. Dependiendo de cómo lo hacemos o el uso que le daremos, estará en una etiqueta DIV, P, UL, IMG, TABLE, etc. Sin importar cuál sea, a los efectos prácticos, esa etiqueta no es otra cosa que un rectángulo donde adentro "hay algo" que puede ser cualquier cosa, incluyendo otras etiquetas.

Esos rectángulos pueden ser controlados de manera individual si les colocamos un nombre único, es decir si los identificamos con precisión y para eso, usamos un parámetro llamado ID. Por ejemplo:

<div id="pepito"> ....... </div>
<img id="unaImagen" src="laImagen" />
<p id="TEXTO1234"> ....... </p>

El nombre que le ponemos no importa, puede ser cualquiera y contener letras, números o guiones pero no espacios en blanco. Puede estar en mayúsculas, minúsculas o ambas cosas aunque debemos recordar que JavaScript es sensible a eso así que cuando usamos esos nombres en un código, hay que usar el mismo criterio ya que id="TEXTO1234" e id="texto1234" no serán el mismo.

Los IDs deben ser únicos, es decir, no debe haber dos iguales en una misma página porque si luego los queremos manipular, el navegador no sabrá a cuál nos referimos.

Es gracias a esos IDs que podemos usar JavaScript para cambiar dinámicamente (cuando la pagina ya se ha cargado) las propiedades de esos bloques; por ejemplo, mostrarlos u ocultarlos a voluntad.

Usando CSS es sencillo ocultar el contenido de algo, basta colocarle la propiedad display: none:

<div style="display: none;"> ... este es el contenido ... </div>

Esa propiedad es común a todas las etiquetas así que, podemos ocultar cualquier parte de una página web pero ¿para qué sirve ocultar algo? Muchos creen que ocultar algo utilizando este método alivia la carga de una página pero, eso no es cierto. Justamente, el que eso no sea cierto es lo que nos permite hacer el proceso inverso, es decir, mostrarlo, sin necesidad de recargar nada y por lo tanto, el efecto es casi instantáneo por una sencilla razón, ya está allí desde el inicio, ya se cargó junto con el resto, no lo vemos pero está ACÁ ABAJO.

ACÁ ESTOY

Para hacerlo visible, usamos la propiedad contraria que es display:block y que es la propiedad por defecto de la mayoria de las etiquetas así que:

<div style="display: block;"> ... este es el contenido ... </div>

y:

<div> ... este es el contenido ... </div>

serán visibles y:

<div style="display: none;"> ... este es el contenido ... </div>

será invisible.

Pero ¿cómo hacemos para permutar entre ambos estados? ¿cómo hacemos para que algo oculto se muestre y algo visible se oculte? Para eso usamos JavaScript, dándole una instrucción que cambie el estilo CSS de algún elemento al que le hemos dado un nombre. En general, sería así:

nombreID.style.propiedad = 'valor';

Para que no tengamos problemas a la hora de indicarle al navegador cuál es la etiqueta que vamos a modificar, en lugar de usar nombreID, usamos una función interna:

getElementById('nombreID').propiedad = 'valor';

o bien:

document.getElementById('nombreID').propiedad = 'valor';

La forma de identificar la propiedad suele ser similar a la propiedad CSS aunque hay variaciones. En este caso serán:

getElementById('nombreID').style.display = 'block';
getElementById('nombreID').style.display = 'none';

¿Cómo aplicamos esto? Para que funcione siempre, sin importar el navegador, lo mejor es utilizar enlaces. En estos enlaces, basta agregar un parámetro más, un evento. El más común sería onclick:

<a href="javascript:void(0);" onclick="getElementById('ejemplo').style.display='block';">TEXTO O IMAGEN</a>
<div id="ejemplo" style="display:none;'> ....... </div>

En ese ejemplo, haciendo click sobre el TEXTO O IMAGEN, el bloque oculto llamado ejemplo, se mostraría.

¿Y cómo lo ocultamos otra vez? Una forma sería agregarle otro enlace dentro del elemento oculto que lo cierre:

<a href="javascript:void(0);" onclick="getElementById('ejemplo').style.display='block';">TEXTO O IMAGEN</a>
<div id="ejemplo" style="display:none;'>
  .......
  <a href="javascript:void(0);" onclick="getElementById('ejemplo').style.display='none';">CERRAR</a>
</div>

UN EJEMPLO

ACÁ ESTOY
CERRAR

Funciona pero podemos hacerlo mejor y simplificarlo. Por ejemplo, es muy común usar una función que agregamos antes de </head> y que nos permite permutar entre dos estados. A esto, suele llamarsele efecto toggle:

<script type='text/javascript'>
//<![CDATA[
  function toggle(cual) {
    var elElemento=document.getElementById(cual);
    if(elElemento.style.display == 'block') {
      elElemento.style.display = 'none';
    } else {
      elElemento.style.display = 'block';
    }
  }
//]]>
</script>

¿Que hace eso? Cuando lo ejecutamos, enviamos el nombre de un ID y la función verifica el estado. Si está visible, lo oculta y si está oculto lo muestra. Un ejemplo de MOSTRAR/OCULTAR

ACÁ ESTOY

Lo usamos de manera similar, con un enlace y el evento onclick:

<a href="javascript:void(0);" onclick="toggle('ejemplo');">TEXTO O IMAGEN</a>
<div id="ejemplo" style="display:none;'> ....... </div>

Para que ese efecto estuviera completo, faltaría algo, hacer que el texto del enlace cambie de tal modo que un usuario supiera que basta hacer click otra vez en el mismo para cambiar de un estado a otro.

Hay muchos métodos para eso pero, aqui va otro script más que podemos agregar antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  function toggleEnlace(accion, cual) {
    if (accion == "mostrar") {
      document.getElementById("miContenido"+cual).style.display = "block";
      document.getElementById("miEnlace"+cual).href="javascript:toggleEnlace('ocultar',"+cual+")";
      document.getElementById("miEnlace"+cual).innerHTML = "CONTRAER";
    }
    if (accion == "ocultar") {
      document.getElementById("miContenido"+cual).style.display = "none";
      document.getElementById("miEnlace"+cual).href="javascript:toggleEnlace('mostrar',"+cual+")";
      document.getElementById("miEnlace"+cual).innerHTML = "EXPANDIR";
    }
  }
//]]>
</script>

Y lo usamos de esta manera:

<a id="miEnlace1" href="javascript:toggleEnlace('mostrar', 1)">EXPANDIR</a>
<div id="miContenido1" style="display:none;"> ... CONTENIDO OCULTO 1 ... </div>

<a id="miEnlace2" href="javascript:toggleEnlace('mostrar', 2)">EXPANDIR</a>
<div id="miContenido2" style="display:none;"> ... CONTENIDO OCULTO 2 ... </div>

EJEMPLO 1 EXPANDIR | EJEMPLO 2 EXPANDIR | EJEMPLO 3 EXPANDIR

EL EJEMPLO 1

EL EJEMPLO 2

EL EJEMPLO 3