Sergio Mejías Sánchez » CSS http://www.sergiomejias.com Blog personal de Sergio Mejías Sánchez Tue, 20 Dec 2011 07:54:50 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Mostrando y ocultando Div usando CCS y Javascript http://www.sergiomejias.com/2006/11/mostrando-y-ocultando-div-usando-ccs-y-javascript/?utm_source=rss&utm_medium=rss&utm_campaign=mostrando-y-ocultando-div-usando-ccs-y-javascript http://www.sergiomejias.com/2006/11/mostrando-y-ocultando-div-usando-ccs-y-javascript/#comments Mon, 20 Nov 2006 14:35:33 +0000 Sergio Mejias Sánchez http://www.sergiomejias.com/2006/11/20/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

]]> http://www.sergiomejias.com/2006/11/mostrando-y-ocultando-div-usando-ccs-y-javascript/feed/ 2