View Full Version : Switch menu: switchable section inside switchable section?

11-26-2005, 02:08 AM
Switch menu

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.


function SwitchMenu(obj){
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";
el.style.display = "none";

HTML menu code (unaltered):

<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>

<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>

<div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
<span class="submenu" id="sub3">
- <a href="http://www.codingforums.com">Coding Forums</a><br>

<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>

<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>


And this doesn't work:

<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>
- <a href="help.htm">Scripts FAQs</a>

I hope somebody can help.
Thanks in advance!

11-26-2005, 05:30 AM
See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=2166&page=1&pp=10) and particularly post_#6 (http://www.dynamicdrive.com/forums/showpost.php?p=8169&postcount=6) from it. Let us know if you still have questions.

11-26-2005, 05:49 AM
Sorry, I looked to see if a similar question had previously been asked but couldn't find one.

11-26-2005, 07:13 AM
Thanks, just had a look at that thread, your code works like a charm!
My problem is solved! Thanks again!