Expandir y contraer (otras formas)

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:

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.

Click para Ver/Ocultar

Fila 1 Columna 1	Fila 1 Columna 2	Fila 1 Columna 3
Fila 2 Columna 1	Fila 2 Columna 2	Fila 2 Columna 3
Fila 3 Columna 1	Fila 3 Columna 2	Fila 3 Columna 3

La segunda posibilidad, se me ocurrió viendo un truco en el Blog de Gem@ donde se mostraba un script para Desplegar y recoger (cualquier parte del blog).

Este truco, utiliza un criterio diferente, la idea es que a un elemento le adjudicamos una clase CSS, es decir, una serie de propiedades (color, fondo, tamaño, etc), una de ellas, la propiedad display con la que podemos controlar si está visible u oculto. Bien, el truco consiste en cambiar la clase CSS de ese elemento cuando hacemos click en algún lado.

En realidad hace lo mismo que la anterior pero, si cambiamos la clase podemos ampliar aún más las posibilidades y no sólo permutar entre visible y oculto. Demasiado hablar, aquí hay un ejemplo:

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.

Este es el script y las definiciones de estilo que agregamos antes de la etiqueta </head>:

<style type='text/css'>
.elementoVisible {display:block;}
.elementoOculto {display:none;}
.linkContraido {
     cursor: pointer;
     background: #color url(direccionURL_imagenContraido) no-repeat;
     width: anchopx;
     [propiedades de los textos]
}
.linkExpandido {
     cursor: pointer;
     background: #color url(direccionURL_imagenExpandido) no-repeat;
     width: anchopx;
     [propiedades de los textos]
}
</style>

<script type='text/JavaScript'>
     function desplegarContraer(cual,desde) {
          var elElemento=document.getElementById(cual);
          if(elElemento.className == 'elementoVisible') {
               elElemento.className = 'elementoOculto';
               desde.className = 'linkContraido';
          } else {
               elElemento.className = 'elementoVisible';
               desde.className = 'linkExpandido';
          }
}
</script>

Ahora, podemos utilizar las clases CSS creadas dentro de cualquier etiqueta HTML. La sintaxis general es la siguiente:

<div onclick="desplegarContraer('nombreID',this);" class="linkContraido">TEXTO</div>
<UNAetiqueta id="nombreID" class='elementoOculto'>
....... el contenido .......
</UNAetiqueta>

donde nombreID debe ser un nombre único y UNAetiqueta es cualquier etiqueta válida.

Aquí hay algunos ejemplos:

• Enlace 1
• Enlace 2
• Enlace 3
• Enlace 4
• Enlace 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Fila 1 Columna 1	Fila 1 Columna 2	Fila 1 Columna 3
Fila 2 Columna 1	Fila 2 Columna 2	Fila 2 Columna 3
Fila 3 Columna 1	Fila 3 Columna 2	Fila 3 Columna 3

El código fuente de los ejemplos utilizados:

<div onclick="desplegarContraer('unaLista',this);" class="linkContraido">UNA LISTA UL/LI</div><br /><ul id="unaLista" class='elementoOculto'><li><a href="javascript:void(0);">Enlace 1</a></li><li><a href="javascript:void(0);">Enlace 2</a></li><li><a href="javascript:void(0);">Enlace 3</a></li><li><a href="javascript:void(0);">Enlace 4</a></li><li><a href="javascript:void(0);">Enlace 5</a></li></ul>

<div onclick="desplegarContraer('unBloque',this);" class="linkContraido">UN BLOQUE DIV</div><br /><div id="unBloque" class='elementoOculto'><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...</p><p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ...</p></div>

<div onclick="desplegarContraer('unaImagen',this);" class="linkContraido">UNA IMAGEN</div><br /><p id="unaImagen" class='elementoOculto'><im<br />g src="direccionURL"/></p>

<div onclick="desplegarContraer('unFormulario',this);" class="linkContraido">UN FORMULARIO</div><br /><form id="unFormulario" class='elementoOculto'><input size="40" type="text"/> <input value="Enviar" type="button"/> </form>

<div onclick="desplegarContraer('unTabla',this);" class="linkContraido">UNA TABLA</div><br /><table id="unTabla" class='elementoOculto' border="0" cellpadding="5" cellspacing="5"><tr bgcolor="#333333"><td>Fila 1 Columna 1</td><td>Fila 1 Columna 2</td><td>Fila 1 Columna 3</td></tr><tr bgcolor="#333333"><td>Fila 2 Columna 1</td><td>Fila 2 Columna 2</td><td>Fila 2 Columna 3</td></tr><tr bgcolor="#333333"><td>Fila 3 Columna 1</td><td>Fila 3 Columna 2</td><td>Fila 3 Columna 3</td></tr></table>