Crossbrowser Show/Hide Div Tag

i had a lot of difficulty to get some code I found to work on both ie and firefox.

After a bit of testing and debugging I found that certain css attributes were not working properly in firefox. Not sure if the attributes were not standard - im no css expert, but be careful on whether you use the display property or the visibility property. It seems that Firefox seems to prefer the visibility property. .

this is the javascript i ended up with to show and hide a div tag (and css properties on the div).

Again be sure you are using visibility tag. Others may have been able to work with css display property... but this worked for me.

function ShowContent(d) {

if (document.getElementById) { // DOM3 = IE5, NS6

document.getElementById(d).style.visibility = "";

} else {

if (document.layers) { // Netscape 4

document.d.visibility= "";

} else { // IE 4

document.all.d.style.visibility = "";

}

}

//if(d.length < 1) { return; }

//document.getElementById(d).style.visibility = "";

}

 

function HideContent(d) {

document.getElementById(d).style.visibility = "hidden";

//alert(d);

if (document.getElementById) { // DOM3 = IE5, NS6

document.getElementById(d).style.visibility = "hidden";

} else {

if (document.layers) { // Netscape 4

document.d.visibility= "hidden";

} else { // IE 4

document.all.d.style.visibility = "hidden";

}

}

//if(d.length < 1) { return; }

}

now for the div tag

<div id="dynamicDiv" style="visibility:hidden; position:absolute; background-color: white;" >

insert your content in here

</div>

then just call the HideContent('dynamicDiv') and ShowContent('dynamicDiv') from click event or create an href link like so:

<a href="javascript:ShowContent('dynamicDiv')">Show The Div</a>

<a href="javascript:HideContent('dynamicDiv')">Hide The Div</a>

hope that helps!

Mz