Menu
Hi Everyone,
I have the code below which works ok but I need to try and simplify it if at all possible.
Is there a way to clean up the javascript code so it doesn’t have all the info for other browsers? We are just using IE6.
Also, i’m trying to setup a template so others can easily use it and just plug in info. I like how the content of either div shows in the same spot but I think it would be confusing to have to keep changing the location fo the div box. Any easier way to do this?
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Test Show-Hide</title>
<script language=javascript type=’text/javascript’>
function showdiv(pass) {
var divs = document.getElementsByTagName(‘div’);
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are ‘see’ divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility=”visible”;// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = ‘visible’;
else // IE 4
document.all.divs[i].visibility = ‘visible’;
} else {
if (document.getElementById)
divs[i].style.visibility=”hidden”;
else
if (document.layers) // Netscape 4
document.divs[i].visibility = ‘hidden’;
else // IE 4
document.all.divs[i].visibility = ‘hidden’;
}
}
}
</script>
<body>
<a href=”javascript:showdiv(‘Div1’)”>Link for Div1</a> <br>
<a href=”javascript:showdiv(‘Div2’)”>Link for Div2</a>
<p></p>
<div id=”Div1″ style=”position: absolute; left:5px; top:165px; visibility: hidden”>
<p>Text for Div1</p>
</div>
<div id=”Div2″ style=”position: absolute; left:5px; top:165px; visibility: hidden”></a>
<p>Text for Div2</p>
</div>
</body>
</html>