Three layer Expand/Collapse menu

[newfrontiers]

I am creating an expand/collapse menu in HTML using DIV and SPAN tags. The menu works fine up to 2 levels, but when I add a third level the menu does not collapse. The code I have is below. The issue is that the Insurance heading does not collapse the menu items below it. It appears the reason why is that the Group Benefits menu item is also a collapse/expand menu (nested if you will).

Thanks for any suggestions.

John

<div class="menutitle" onclick="SwitchMenu('sub2')">Insurance</div>
<span class="submenu" id="sub2"></span>
<div class="menutitle2" onclick="SwitchMenu('sub3')">Group Benefits</div></span>

<span class="submenu" id="sub3">
<a href="gbenefits.php">Benefit Consulting</a><br>
<a href="gmedical.php">Medical</a><br>
<a href="gdental.php">Dental</a><br>
<a href="gdisability.php">Disability</a><br>
<a href="glife.php">Life</a><br>
<a href="gltc.php">Long Term Care</a><br>
<a href="gcdhp.php">Consumer Driven Plans</a><br>
<a href="gvol.php">Voluntary Plans</a>
</span>

</span>

<div class="menutitle2" onclick="SwitchMenu('sub4')">Financial Institution Trust</div>
</span>

<span class="submenu" id="sub4">
<a href="fithistory.php">History</a><br>
<a href="fitproducts.php">Products</a><br>
<a href="fitservice.php">Service</a><br>
</span>

<div class="menutitle2" onclick="SwitchMenu('sub5')">Individual Insurance</div>
</span>

<span class="submenu" id="sub5">
<a href="ilife.php">Life Insurance</a><br>
<a href="idisability.php">Disability Insurance</a><br>
<a href="istructure.php">Structured Products</a><br>
</span>

<div class="menutitle2" onclick="SwitchMenu('sub6')">Our Process</div>
</span>

<span class="submenu" id="sub6">
<a href="ourprocess.php">Our Process</a><br>

</span>

<div class="menutitle2" onclick="SwitchMenu('sub7')">Resource Center</div>
</span>

<span class="submenu" id="sub7">
<a href="resourcecenter.php">Resource Center</a></span><span class="submenu" id="sub6" style="font-family:Verdana; font-style:normal; font-size:12; color:rgb(102,102,102);">™</span><span class="submenu" id="sub6"><br>

</span>
<p></p>

 

[BillyRayPreachersSon]

You would probably want to ask this in the JavaScript forum (forum216), and post the relevent JS code, too. This will be a JS logic / coding issue, not an HTML / CSS issue.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]