Show/hide content via <DIV> & Javascript

show and hide div content via JavaScript

[HongKongPhooey]

I found an old topic relating to this subject here:

[webmasterworld.com...]

I found the code useful but it didn't allow me to show/hide multiple divs on the same page so I've modified it to work across the same set of browsers as follows:

function showhide(layer_ref) {
// INTERNET EXPLORER
if (document.all) { // IE 4 onwards 
//alert('Browser 1');
if (eval("document.all." + layer_ref + ".style.display") == 'none') {
eval("document.all." + layer_ref + ".style.display = 'inline'"); 
}
else {
eval("document.all." + layer_ref + ".style.display = 'none'"); 
}
}
// NETSCAPE 
if (document.layers) { // Netscape 4 or below
//alert('Browser 2');
document.layers[layer_ref].display = state;
if (document.layers[layer_ref].display == 'none') {
document.layers[layer_ref].display = 'inline';
}
else {
document.layers[layer_ref].display = 'none';
}
}
// CHROME AND FIREFOX
if (document.getElementById &&!document.all) { // Chrome or FireFox
//alert('Browser 3');
hza = document.getElementById(layer_ref); 
if (hza.style.display == 'none') {
hza.style.display = 'inline';
}
else {
hza.style.display = 'none';
}
}
} 

It seems to work pretty well.

[edited by: engine at 9:35 am (utc) on Apr 3, 2011]

[JAB Creations]

Welcome to WebmasterWorld HongKongPhooey. :)

Work smarter, not harder. When you become familiar with the strengths of each language (XHTML, CSS and JavaScript) you'll begin to write code that you use over and over.

- John

XHTML

<div onclick="change('id1','block');change('id2','hidden');">clicky clicky</div>

CSS

.block {display: block;}
.hidden {display: none;}

JavaScript

function change(id,newClass)
{
 if (document.getElementById(id))
 {
 document.getElementById(id).className=newClass;
 }
 else if (id)
 {
 id.className=newClass;
 }
 else
 {
 alert('Error: the id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+newClass);
 }
}