1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 5:52 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

hiding and showing depending on link id

         

andre73

1:49 pm on Dec 5, 2004 (gmt 0)

10+ Year Member



Hi,can anyone please tell me how to achieve the following. I have three divs the first div, mainNav, is visible and contains 5 links. One of the links in mainNav should open up the div, firstSubMenu, which holds 8 more links. one of the links in the firstSubMenu should then open up the div, secondSubMenu, which holds 5 links. The other links (the links that does not show a div) in mainNav should hide the firstSubNav and secondSubMenu divs if they are visible. The other links in firstSubMenu (the links that does not show a div) should hide the secondSubMenu div if it is visible. I have the following code which does an ok job but the problem is that the links in mainNav doesnt close the seconSubMenu if it is open. Please tell me how to solve this problemo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<script language="JavaScript1.2">
function hideshow(which){
if (!document.getElementById)
return
alert(which);
if (which.style.display=="none")
which.style.display=""
else
which.style.display="none"
}
function hide(which){
if (!document.getElementById)
return
if (which.style.display=="")
which.style.display="none"
}

</script>
<div id="mainNav">
<a href="#" id="mainNav 1" onClick="javascript:hideshow(document.getElementById('firstSubMenu'))">SORTIMENT</a>
<a href="#" id="mainNav 2" onClick="javascript:hide(document.getElementById('firstSubMenu'))">BUTIKEN</a>
<a href="#" id="mainNav 3" onClick="javascript:hide(document.getElementById('firstSubMenu'))">LEVERANT&Ouml;RER</a>
<a href="#" id="mainNav 4" onClick="javascript:hide(document.getElementById('firstSubMenu'))">KONTAKTA OSS</a>
<a href="#" id="mainNav 5" onClick="javascript:hide(document.getElementById('firstSubMenu'))">STARTSIDA</a>
</div>
<div id="firstSubMenu" style="display:none;">
<a href="#" id="FSub 1" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 1</a>
<a href="#" id="FSub 2" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 2</a>
<a href="#" id="FSub 3" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 3</a>
<a href="#" id="FSub 4" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 4</a>
<a href="#" id="FSub 5" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 5 </a>
<a href="#" id="FSub 6" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 6</a>
<a href="#" id="FSub 7" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 7</a>
<a href="#" id="FSub 8" onClick="javascript:hideshow(document.getElementById('secondSubMenu'))">FSub 8</a>
</div>
<div id="secondSubMenu" style="display:none;">
<a href="#" id="SSub 1">SSub 1</a>
<a href="#" id="SSub 2">SSub 2</a>
<a href="#" id="SSub 3">SSub 3</a>
<a href="#" id="SSub 4">SSub 4</a>
<a href="#" id="SSub 5">SSub 5</a>
</div>

</body>
</html>

adni18

2:11 pm on Dec 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



So, by clicking on SSub 5, you hide:

FSub 1, FSub 2, FSub 3, FSub 4, FSub 5, FSub 6, FSub 7, and FSub 8?

adni18

2:41 pm on Dec 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You might want to go without the [object] alert, too. That was just testing, tho. Right? ;-)

andre73

8:26 pm on Dec 5, 2004 (gmt 0)

10+ Year Member



yeah the alert is just for testing purposes :)
No the SSub links shall not hide any divs. In the mainNav div, one link should be able to hide and show the div firstSubMenu, all the other links in mainNav should hide the firstSubMenu div if it is visible. Also, all the links in in mainNav shall close the secondSubMenu div if it is visible. All the links in the div firstMenuSub shall close the secondSubMenu if it is visible, except for one link which should show and hide it depending on visibility.

adni18

12:57 am on Dec 6, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



except for one link which should show and hide it depending on visibility

What is the innerHTML, or containing text of this link? Which one?

adni18

1:05 am on Dec 6, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<script language="JavaScript1.2">
function hideshow(which){
if (!document.getElementById)
return ;

if (which.style.display=="none")
which.style.display="" ;
else
which.style.display="none" ;
}
function hide(which){
if (!document.getElementById)
return
if (which.style.display=="")
which.style.display="none" ;
}

</script>
<div id="mainNav">
<a href="#" id="mainNav 1" onClick="javascript:hideshow(document.getElementById('firstSubMenu'));hide(document.getElementById('secondSubMenu'))">SORTIMENT</a>
<a href="#" id="mainNav 2" onClick="javascript:hide(document.getElementById('firstSubMenu'));hide(document.getElementById('secondSubMenu'))">BUTIKEN</a>
<a href="#" id="mainNav 3" onClick="javascript:hide(document.getElementById('firstSubMenu'));hide(document.getElementById('secondSubMenu'))">LEVERANT&Ouml;RER</a>
<a href="#" id="mainNav 4" onClick="javascript:hide(document.getElementById('firstSubMenu'));hide(document.getElementById('secondSubMenu'))">KONTAKTA OSS</a>
<a href="#" id="mainNav 5" onClick="javascript:hide(document.getElementById('firstSubMenu'));hide(document.getElementById('secondSubMenu'))">STARTSIDA</a>
</div>
<div id="firstSubMenu" style="display:none;">
<a href="#" id="FSub 1" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 1</a>
<a href="#" id="FSub 2" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 2</a>
<a href="#" id="FSub 3" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 3</a>
<a href="#" id="FSub 4" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 4</a>
<a href="#" id="FSub 5" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 5 </a>
<a href="#" id="FSub 6" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 6</a>
<a href="#" id="FSub 7" onClick="javascript:hide(document.getElementById('secondSubMenu'))">FSub 7</a>
<a href="#" id="FSub 8" onClick="javascript:hideshow(document.getElementById('secondSubMenu'))">FSub 8</a>
</div>
<div id="secondSubMenu" style="display:none;">
<a href="#" id="SSub 1">SSub 1</a>
<a href="#" id="SSub 2">SSub 2</a>
<a href="#" id="SSub 3">SSub 3</a>
<a href="#" id="SSub 4">SSub 4</a>
<a href="#" id="SSub 5">SSub 5</a>
</div>

</body>
</html>

andre73

11:47 am on Dec 6, 2004 (gmt 0)

10+ Year Member



well I don't understand what you have done here! But the important thing is that it now works like I want it to.
Thanks alot!

adni18

2:22 am on Dec 7, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



On the first set of links, I simply added the hide() function after the first function you had.

Bernard Marx

9:37 am on Dec 7, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Can I throw something in?
No? Well, I will, despite your protestations. 

onClick="javascript:hide(document.getElementById('secondSubMenu'))"

There's a fair amount of this going on, and you could do away with most of it.

1. 

javascript:

Use of this pseudo-protocol is unnecessary in an event handler.
That can go.

2. 

document.getElementById(....)

There is a test for support of this method inside the functions that are called. If the method is not supported
(IE4 & NS4), then the error would have already occurred in the event handler.

IMHO, for this reason, and to make the code shorter, it would be better to put this part inside the functions... 

onClick="hide('secondSubMenu')"

then 

function hideshow(id){ 
    if (document.getElementById)
      var which = document.getElementById(id)
    else
        return;
    if (which.style.display=="none")
    ..etc..
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 5:52 am May 14, 2026