show and hide div

[thehigherentity]

Fist off i have looked all over trying to work out how to do this but with no real luck...

what i want to do is have hidden div's containing links. once you click a link it will open the relivent container showing the hidden links inside
I have this working now but my problem is getting the other div's that have also been opened to close so only one container is open at a time.
I hope i have explained this ok

here is the test code i have just so you can see how i am trying to do this, any help anyone can give would be great!

[code]
<style type="text/css">
div#menu1 { display: none; }
div#menu2 { display: none; }
div#menu3 { display: none; }
div#menu4 { display: none; }
</style>

<script language="JavaScript" type="text/JavaScript">
<!--
function togglehide(what){
if (document.getElementById){ // this is the standard code
var itsstyle = document.getElementById(what).style;
itsstyle.display = itsstyle.display? "":"block";
} else if (document.all){ // this is the old msie versions code
var itsstyle = document.all[what].style;
itsstyle.display = itsstyle.display? "":"block";
} else if (document.layers){ // this is the nn4 code
var itsstyle = document.layers[what].style;
itsstyle.display = itsstyle.display? "":"block";
}
}
//-->
</script>

<div id="sectionLinksheader"><a href="javascript:togglehide('menu1');" title="information">Information</a></div>
<div id="menu1" style="">
<div id="sectionLinks"><a href="index.php?page=news">News</a></div>
<div id="sectionLinks"><a href="index.php?page=tou">Terms</a></div>
<div id="sectionLinks"><a href="index.php?page=study">Study</a></div>
<div id="sectionLinks"><a href="index.php?page=media">Media</a></div>
<div id="sectionLinks"><a href="index.php?page=contact">Contact</a></div>
</div>
<br />
<div id="sectionLinksheader"><a href="javascript:togglehide('menu2');" title="indormation2">Information2</a></div>
<div id="menu2" style="">
<div id="sectionLinks"><a href="index.php?page=news">News</a></div>
<div id="sectionLinks"><a href="index.php?page=tou">Terms</a></div>
<div id="sectionLinks"><a href="index.php?page=study">Study</a></div>
<div id="sectionLinks"><a href="index.php?page=media">Media</a></div>
<div id="sectionLinks"><a href="index.php?page=contact">Contact</a></div>
</div>
<br />
<div id="sectionLinksheader"><a href="javascript:togglehide('menu3');" title="information3">Information3</a></div>
<div id="menu3" style="">
<div id="sectionLinks"><a href="index.php?page=news">News</a></div>
<div id="sectionLinks"><a href="index.php?page=tou">Terms</a></div>
<div id="sectionLinks"><a href="index.php?page=study">Study</a></div>
<div id="sectionLinks"><a href="index.php?page=media">Media</a></div>
<div id="sectionLinks"><a href="index.php?page=contact">Contact</a></div>
</div>
<br />
<div id="sectionLinksheader"><a href="javascript:togglehide('menu4');" title="information4">Information4</a></div>
<div id="menu4" style="">
<div id="sectionLinks"><a href="index.php?page=news">News</a></div>
<div id="sectionLinks"><a href="index.php?page=tou">Terms</a></div>
<div id="sectionLinks"><a href="index.php?page=study">Study</a></div>
<div id="sectionLinks"><a href="index.php?page=media">Media</a></div>
<div id="sectionLinks"><a href="index.php?page=contact">Contact</a></div>
</div>
[/code]

P.S. im no expert with this, I have put this together from bits of code i have found allover the place

[thehigherentity]

sorted it, i made a loop of all the div names and closed them all but the one i wanted to open, was easy realy

[Zeon]

Ok, first of all you should never have the same id for multiple objects

I suppose you put the <a> tags inside divs so that they won't be in the sam row
This is easy to fix with css:
[code]
div.menu_container{
display:none;
}

div.menu_container a{
display:block;
}
[/code]

[code]
<div class="sectionLinksheader"><a href="javascript:togglehide(2);" title="indormation2">Information2</a></div>

<div id="menu1" class="menu_container">

<a href="index.php?page=news">News</a>
<a href="index.php?page=tou">Terms</a>
<a href="index.php?page=study">Study</a>
<a href="index.php?page=media">Media</a>
<a href="index.php?page=contact">Contact</a>
</div>
[/code]

[code]
var lastopen = null

function togglehide(divno){
  var menudiv = document.getElementById('menu'+divno)
  if (lastopen != menudiv){
      if (lastopen !=null)
      lastopen.style.display = 'none'
      menudiv.style.display = 'block'
      lastopen = menudiv
  }
}
[/code]

didn't test it but theoretically it should work just fine

[Jtech]

oki well this is what i use to have a popdown menu it works well and it pulls the menu back up once tho mouse has left the links


script
[code]



  if (document.getElementById) {
    stdBrowser = true
  }
  else {
stdBrowser = false
}

  function toggleMenu(currElem,nextPos) {
 
  if (stdBrowser) {
      menuObj = document.getElementById(currElem).style
 
  }
    else {
 
  menuObj = eval("document." + currElem)
 
  } 
 
if (toggleMenu.arguments.length == 1) {
if (parseInt(menuObj.top) == -5) {
  nextPos = -90
 
}
  else {
    nextPos = -5

}

  }
 
  if (stdBrowser) {
      menuObj.top = nextPos + "px"
 
}
  else {
    menuObj.top = nextPos


  }
 
} 



[/code]

and this activates the pull down


[code]

<a href="#" id="tlmenu" class="hover1">Home..</a>

[/code]

and this is the <div> it looks for

[code]
/*this is the link to activate the pulldown*/
<div align="left" id="fileMenu" class="menu" onmouseover="toggleMenu('fileMenu',-5)" onmouseout="toggleMenu('fileMenu',-450)">
 
  ######

</div>
[/code]

And this is the css to position it

[code]

/*this controls where the menu is positioned "like out of sight so u can see it"*/
  .menu {
                position:absolute;               
                top:-450px;
    margin-left:-50;



     
}

__________________________________

/*this is where you put ur links for pull down menu */
#fileMenu {
              margin-left:0;
  margin-top:299px;
  width:23%;
 
 
}

[/code]

hope this helps

[Jtech]

LOL you have your self a collections of pull down menu's there now ....
we must of posted all at the same time
:D

[franklyn]

this method does not work with ie . all the html tags disappear.
http://www.phpfreaks.com/forums/index.php/topic,122268.0.html

[fenway]

Sounds awfully similar to the other post...