Esta solución tiene un resultado espectacular porque no tienes que enviar al usuario un popup o una página aparte para mostrar una información. Al hacer un click se mostrará la parte del código que haya en el Div como si saliera de la nada.

Lo primero, aquí­ está la función:

[js] function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}

Como puedes ver, esta función deberí­a trabajar en todos los navegadores incluyendo versiones antiguas de Internet Explorer y Netscape. Lo siguiente que necesitas es crear el div que se mostrará y ocultará utilizando para ello un poco de CSS. A continuación está el CCS y el tag div usando en el ejemplo:

[html] div#commentForm
{
margin: 0px 20px 0px 20px;
display: none;
}

Fijate que necesitas dar al div como ID el nombre del estilo puesto en el CSS porque es como el javascript sabe que div ha de ocultar y mostrar cambiando para ello el valor “display: none;” to “display: block;” cada vez que se pulse sobre el elemento que querramos, tal y como muestro a continuación:

[html]
Add a comment


onclick=”javascript:toggleLayer(‘commentForm’);” />
[/html]

Fuente netlobo.com