How to toggle between multiple <DIV>-tags?

[HollyVally]

I have the following code:

<div id=menu1 onclick='showhide(list1)'>menu1</div>
<div id=list1 style='display:none'>list1</div>
<div id=menu2 onclick='showhide(list2)'>menu1</div>
<div id=list2 style='display:none'>list1</div>
<div id=menu3 onclick='showhide(list3)'>menu1</div>
<div id=list3 style='display:none'>list1</div>

What I don't have:
the 'showhide' function.

I need the following to acheive:

a. clicking on one 'menu' item should open that menu and at the same time close the other menus
b. if 'menu' is open than clicking on it should close it without siturbing the others.

How can i get this?

I am using the following browsers:

IE4+, NS4/+, IE5+, NS6+, NS7
IE: Internet Explorer
NS: Netscape Navigator

 

[dwarfthrower]

Well, the standards compliant way would be:
[tt]
function showhide(strDivID){
var objDivToToggle = document.getElementById(strDivID);
if(objDivToToggle.style.display != "none&quot{
objDivToToggle.style.display = "none";
}
else{
objDivToToggle.style.display = "block";
}
}
[/tt]
And would be called as follows:
[tt]
<div id=menu1 onclick='showhide(&quot;list1&quot'>menu1</div>
<div id=list1 style='display:none'>list1</div>
<div id=menu2 onclick='showhide(&quot;list2&quot'>menu1</div>
<div id=list2 style='display:none'>list2</div>
<div id=menu3 onclick='showhide(&quot;list3&quot'>menu1</div>
<div id=list3 style='display:none'>list3</div>
[/tt]

How well the list of browsers you mentioned stacks up against the standards is anyone's guess.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]

 

[HollyVally]

Although this is a perfect working reply of my question b. this still doesn't solve my question a. below!

As I said: I need the following to acheive:

a. clicking on one 'menu' item should open that menu and at the same time close the other menus
b. if 'menu' is open than clicking on it should close it without disturbing the others.

Can I reach the other list items in the following way?

<div id=menucontainer>
    <div id=menu1 onclick='showhide(&quot;list1&quot;)'>menu1</div>
    <div id=list1 style='display:none'>list1</div>
    <div id=menu2 onclick='showhide(&quot;list2&quot;)'>menu1</div>
    <div id=list2 style='display:none'>list2</div>
    <div id=menu3 onclick='showhide(&quot;list3&quot;)'>menu1</div>
    <div id=list3 style='display:none'>list3</div>
    ...
</div>

In that case, what is the workaround to get the &quot;parent element 'menucontainer'&quot; and then it's &quot;sibling elements (list2, list3 etc. many of them)&quot;?

[I know u realised it, but just for the records: list id and menu ids are created on the fly.]

 

[dwarfthrower]

Sorry Mate, Was in a rush to get home before the weekend and failed to read your question properly:

function showhide(strDivID){
 var objDivToToggle = document.getElementById(strDivID);
 if(objDivToToggle.style.display != "none"){
  //it's open, just close it and leave the others alone
  objDivToToggle.style.display = "none";
 }
 else{
  //it's closed, close all the others and open this one

  //close all the others.
  var divList = document.body.getElementsByTagName("DIV");
  for(var i = 0; i < divList.length; i++){
   var currDiv = divList[i];
   var currId = currDiv.id;
   var currIdPrefix = currId.slice(0,4);

   // Check to see if this div's id starts with &quot;list&quot;
   if(currIdPrefix == &quot;list&quot;){
    // if so - hide it
    currDiv.style.display = &quot;none&quot;;
   }
  }
  
  //show the div that was called.
  objDivToToggle.style.display = &quot;block&quot;;
 }
}

Hope this fits your requirements better

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]