Switch menu: switchable section inside switchable section?

**GranoSalis** · 11-26-2005, 02:08 AM

Switch menu
http://www.dynamicdrive.com/dynamici...switchmenu.htm

I really like the Switch menu and it has been perfect for my needs.
But I was just wondering if there was a way to put another switchable section inside a switchable section; thus it would only be seen when the section which contained it was 'switched'.
This isn't a question of having more than one menu one a site, merely just adding another part to the one I already have.

Here is what I think is the important bit of the code. The rest can be found on the above page.

Javascript:

Code:

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
	for (var i=0; i<ar.length; i++){
	if (ar[i].className=="submenu") //DynamicDrive.com change
		ar[i].style.display = "none";
		}
		el.style.display = "block";
		}else{
		el.style.display = "none";
		}
	}
}

HTML menu code (unaltered):

Code:

<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
<span class="submenu" id="sub1">
	- <a href="new.htm">What's New</a><br>
	- <a href="hot.htm">What's hot</a><br>
	- <a href="revised.htm">Revised Scripts</a><br>
	- <a href="morezone/">More Zone</a>
</span>

<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
	- <a href="notice.htm">Usage Terms</a><br>
	- <a href="faqs.htm">DHTML FAQs</a><br>
	- <a href="help.htm">Scripts FAQs</a>
</span>

<div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
<span class="submenu" id="sub3">
	- <a href="http://www.codingforums.com">Coding Forums</a><br>
</span>
	
<div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
<span class="submenu" id="sub4">
	- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
	- <a href="http://www.freewarejava.com">Freewarejava</a><br>
	- <a href="http://www.cooltext.com">Cool Text</a><br>
	- <a href="http://www.google.com">Google.com</a>
</span>

<img src="about.gif" onclick="SwitchMenu('sub5')"><br>
<span class="submenu" id="sub5">
	- <a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
	- <a href="http://www.dynamicdrive.com/recommendit/">Recommend</a><br>
	- <a href="http://www.dynamicdrive.com/contact.htm">Email</a><br>
</span>

</div>

And this doesn't work:

Code:

	<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
	- <a href="notice.htm">Usage Terms</a><br>
		<div class="menutitle" onclick="SwitchMenu('sub6')">FAQ/Help</div>
		<span class="submenu" id="sub6">
		- <a href="faqs.htm">DHTML FAQs</a><br>
		</span>
	- <a href="help.htm">Scripts FAQs</a>
</span>

I hope somebody can help.
Thanks in advance!