Show/hide elements on page using javascript

Posted by fragov in javascriptMar 15th, 2010 | no responses

In between your <head> tags put this java script in (you may put it between <body> tags too):

<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}

function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
</script>

As you can see it gets the div ID for each of the browsers and hides it or shows it. I named the Div Id hideShow to make it easy for you.

Then in your document put in your Div element the id name hideShow you can change this of course

<div id="hideShow" ..etc>
My content
</div>

and this to call the javascript to hide it

<a href="javascript:hideDiv()">Hide Div</a>

and this to show it

<a href="javascript:showDiv()">show Div</a>

Leave a Reply