Mostrando y ocultando Div usando CCS y Javascript

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";
}
}

[/js]

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;
}

Aquí­ pongo el contenido que quiero mostrar y ocultar

[/html]

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

Sergio Mejias Sánchez

Director de la plataforma de publicación de contenidos digitales Bubok

You may also like...

2 Responses

  1. vico says:

    Ok, buena idea esta sección de trucos, pero serí­a ideal complementarla con un link de “ver el ejemplo en funcionamiento” o algo similar.

  2. Vico says:

    Guay, pero sería ideal ver un enlace del ejemplo en funcionamiento.

    Otra cosa, le he dado al link del tí­tulo de la sección y me ha ido a la misma pantalla pero ha maquetado mal.
    Que lo sepas

Leave a Reply

Your email address will not be published. Required fields are marked *