Menu system 1

[dle46163]

Hi All!

Not sure if anyone would want to take a crack at this or not...But here's what I've got: It's a small script for creating a menu tree. It works great but I want to modify it so that you can only have one section of the tree open at a time. In other words, when you open a second portion of the tree, it should close the last section that was opened. Not sure how complex this would be but any feedback would be awesome! Thanks

******************
Script in the head section
******************


<script language="javascript">
<!--
var Open = "";
var Closed = "";

function preload(){
if(document.images){
Open = new Image(16,13);
Closed = new Image(16,13);
Open.src = "open.jpg";
Closed.src = "closed.jpg";
}}

function showhide (what) {
if (document.getElementById(what + "outline").style.display=="none"){
document.getElementById(what + "sign").src=Open.src;
document.getElementById(what + "outline").style.display="";
}
else {
document.getElementById(what + "sign").src=Closed.src;
document.getElementById(what + "outline").style.display="none";
}
}

document.onload=preload();
-->
</script>



****************
Junk in the body:
****************



<span id='menu1' onClick='showhide(this.id)' style='cursorointer; cursor:hand; font-family:arial; font-weight:bold; font-size:-2'><img id='menu1sign'src='closed.jpg'>
<font face='arial, helvetica' size='-2' color="#660066">
<span>Folder Description</span>
</span>
<br>

<span id='menu1outline' style='display:none'><div style='margin-left: 18'>
<font face='arial, helvetica' size='-2'>
<a href="#" class="media_link" style="text-decoration: none" target="i_frame">Link</a><br>
<a href="#" class="media_link" style="text-decoration: none" target="i_frame">Link</a><br>
<a href="#" class="media_link" style="text-decoration: none" target="i_frame">Link</a><br>
</div>
</span>
<br>



<span id='menu2' onClick='showhide(this.id)' style='cursorointer; cursor:hand; font-family:arial; font-weight:bold; font-size:-2'><img id='menu2sign' src='closed.jpg'>
<font face='arial, helvetica' size='-2'>
<span>Folder description 2</span>
</span>
<br>

<span id='menu2outline' style='display:none'>
<div style='margin-left: 18'>
<font face='arial, helvetica' size='-2'>
<a href="#" class="media_link" style="text-decoration: none" target="i_frame">Link</a><br>
<a href="#" class="media_link" style="text-decoration: none" target="i_frame">Link</a><br>

</div>
</span>
<br>



etc....

 

[theniteowl]

It is an easy change to make.
First set a global variable.

var Open = "";
var Closed = "";
[COLOR=red]var lastOpen="";[/color]

You use this variable to track which menu item was opened last. Then in your function you add a test to make certain that if the lastOpen variable is not blank and is not the same as the current selection and if neither is true then you close the last menu.
At the end of your function you set the lastOpen variable to the current menu selection for the next time.

function showhide (what) {
[COLOR=red]  if (lastOpen != '' && lastOpen != what) {
    document.getElementById(lastOpen + "sign").src=Closed.src;
    document.getElementById(lastOpen + "outline").style.display="none";
  }[/color]
  if (document.getElementById(what + "outline").style.display=="none"){
    document.getElementById(what + "sign").src=Open.src;
    document.getElementById(what + "outline").style.display="";
  }
  else {
    document.getElementById(what + "sign").src=Closed.src;
    document.getElementById(what + "outline").style.display="none";
  }
[COLOR=red]  lastOpen = what;[/color]
}

It could probably be done a bit more elegantly with some thought but just adding it in this is quick and easy.


Paranoid? ME?? Who wants to know????

 

[dle46163]

Excellent work! Thanks soooooo much!