Log in

View Full Version : Simple javascript menu


myyoungfamily
12-20-2006, 07:33 PM
Hey guys I'm not a javascript expert, but I've got this script kina working and I need some help finishing it. I'm using this to hide and display content in a small area. What am I doing wrong? Here's my test script:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style>
#div1{display:block;position:absolute;width:600px;top:75px;left:20px;}
#div2{display:none;position:absolute;width:600px;top:75px;left:20px;}
#div3{display:none;position:absolute;width:600px;top:75px;left:20px;}
</style>

<script type="text/javascript">
function Hide(id){
document.getElementById(id).style.display = "none";
}

function Show(id) {
document.getElementById(id).style.display = "block";
}
</script>

</head>

<body>

<div>
<a href="#" onClick="Show('div1'); Hide('div2','div3');">Why Brush Country</a>
<a href="#" onClick="Show('div2'); Hide('div1','div3');">What We Do</a>
<a href="#" onClick="Show('div3'); Hide('div1','div2');">Why Brush Country</a>
</div>

<div style="position:relative">

<div id="div1">
content one
</div>

<div id="div2">
content two
</div>

<div id="div3">
content three
</div>

</div>

</body>
</html>
myyoungfamily
12-20-2006, 07:46 PM
P.S. Just ignore the button titles
thetestingsite
12-22-2006, 02:45 AM
Well, the most apparent thing to me is the following:






<a href="#" onClick="Show('div1'); Hide('div2','div3');">Why Brush Country</a>




and




[

function Hide(id){
document.getElementById(id).style.display = "none";
}




Notice, you are calling for mulitple IDs to be hidden, but in the Hide function, you only have one ID that can be. You could either add another in the hide function like so:



function Hide(id,other) {
document.getElementById(id).style.display = "none";
document.getElementById(other).style.display = "none";
}


or simply rewrite it to only show the one and hide the rest with a "for" loop. See below.

Use the following for each link:



<a href="#" onClick="ToggleDivs('div1'); return false">Show Div One</a>


and in the head of the document, place the following within the script tag:




function ToggleDivs(id) {
var divs = document.getElementsByTagName('div');
var d = document.getElementById(id);

for (var i = 1; i<=divs.length; i++) {
if (document.getElementById('div'+i)) {document.getElementById('div'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}


Hope this helps.
myyoungfamily
12-22-2006, 05:17 AM
PERFECT! Just what I was needing...