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:

Code:

<!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:

Originally Posted by myyoungfamily

Code:

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

and

[

Code:

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:

Code:

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:

Code:

<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:

Code:

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...

Thread: Simple javascript menu

Thread Tools

Search Thread

Simple javascript menu

Bookmarks

Bookmarks

Posting Permissions