Nested Accordion

Question

I would like to use the accordion to nest multiple levels of
links, while using semantic HTML. This means not surrendering to
DIV soup, but using multiple UL/LI combinations. The HTML I have
worked out, but JavaScript isn't my strong point. How would I edit
the JavaScript to make this work? HTML code sample below:
<div id="mainNav" class="Accordion">
<ul class="AccordionPanel">
<li class="AccordionPanelTab">My Flagship</li>
<li class="AccordionPanelContent">
<ul>
<li class="sectionLinksLevel2">My Home</li>
<li>
<ul>
<li class="sectionLinksLevel3">My Loans</li>
<li class="sectionLinksLevel3">My Tasks</li>
<li class="sectionLinksLevel3">My Pool
Tasks</li>
<li class="sectionLinksLevel3">My Team
Tasks</li>
<li class="sectionLinksLevel3">My Alerts</li>
</ul>
</li>
<li class="sectionLinksLevel2">Flagship
Settings</li>
<li class="hideMe">
<ul>
<li class="sectionLinksLevel3">Change
Password</li>
<li class="sectionLinksLevel3">User Profile</li>
</ul>
</li>
<li class="sectionLinksLevel2">Underwriting
ModelTraining / Resource</li>
</ul>
</li>
</ul>
</div>

Answer 1

You basically just insert an entire Accordion structure
inside one of the Accordion content panels of the outer accordion
and make sure that you call the constructor for the inner one:
<div id="outerAccordion" class="Accordion">
<ul class="AccordionPanel">
<li class="AccordionPanelTab">Outer Accordion Panel
1</li>
<li class="AccordionPanelContent">
<p>Here's a nested Accordion!</p>
<div id="innerAccordion" class="Accordion">
<ul class="AccordionPanel">
<li class="AccordionPanelTab">Inner Accordion Panel
1</li>
<li class="AccordionPanelContent">Inner Panel 2
Content</li>
</ul>
<ul class="AccordionPanel">
<li class="AccordionPanelTab">Inner Accordion Panel
2</li>
<li class="AccordionPanelContent">Inner Panel 2
Content</li>
</ul>
</div>
</li>
</ul>
</div>
<script>
var outer = new Spry.Widget.Accordion("outerAccordion");
var inner = new Spry.Widget.Accordion("innerAccordion");
</script>
--== Kin ==--