Siempre quise saber cómo es que hacían para que con un botón o un link ocultara tremendos pedazos de páginas webs de un momento a otro y sin actualizar la web, y pues muy aparte de impresiones personales, este efecto hace un poco más sofisticada y útil (o lo aparenta) a la página web que lo use… no sé, siempre me gustó ese efecto pero siempre tuve la pereza de buscar el funcionamiento técnico y ni se me pasó por la cabeza lo fácil que podría ser ¬¬ … eso me pasa por subestimar las cosas (bueno tampoco me creo el gran programador, eso se lo dejo a otras personas muy lejos de mi entorno…) pero bueno, vamos con el funcionamiento:

Primero que nada, debemos definir lo que queremos ocultar/mostrar y mediante que cosa (un link o un botón). Para efectos de este ejemplo lo que haremos será tener un div que se muestre/oculte mediante dos botones, uno que está afuera del div y otro dentro de ese div, y tener por defecto al div ocultado! de la siguiente manera:

Div Oculto:

Div Mostrado luego de presionar el botón:

Lo que hacemos es diseñar toda la web así:

<input name="btnMostrar" type="button" value="Mostrar Div" onclick="MostrarDiv()" />
<br /><br />
<div style="display:none;" id="divOculto"><img src="http://i48.tinypic.com/11t5poy.png" border="0" /><br />
<input name="btnOcultar" type="button" value="Ocultar Div" onclick="OcultarDiv()" />
</div>

Esto será pues, un div llamado “divOculto”, definido como oculto y los dos botones con dos funciones javascript dentro de sus eventos onClick (osea, cada vez que se presionen activaran esas funciones). Nota: esto va dentro de las etiquetas <body></body>.

Las funciones debemos definirlas de la siguiente manera:

function MostrarDiv(){
       var div = document.getElementById('divOculto');
       div.style.display = '';
}

function OcultarDiv(){
       var div = document.getElementById('divOculto');
       div.style.display='none';
}

Donde podemos ver que se define una variable “div” el cual toma el valor del objeto del div en cuestión vía id (he ahí porque en el código html al div le pusimos id=”divOculto” en vez de name=”divOculto”), para luego mostrarlo o ocultarlo dependiendo la funcion mediante su propiedad style, cambiandole el valor de display en dejarlo vacío (o mostrarlo), o colocarle “none” (ocultarlo).

Puedes ver el ejemplo en funcionamiento aqui: http://willmedina.co.cc/ejercicios_varios/ocultar_divs.php (lo coloqué como archivo PHP pero no tiene nada que ver, en HTML puro también funciona).

Por lo que debería quedar el código completo algo como esto: http://codepad.org/ohwzIw9Y (mirar código en CodePad).

Espero les haya servido :) …