I'm trying to create a navigation menu that contains multiple level of organization. I'm building a nested jQuery UI Accordion that works great if all my content in the lowest level (deepest) nest of the accordion. The problem is that some elements will have content and a sub accordion. If I place some text in side the top accordion it looks great...but as soon as I wrap it in tags it breaks the nested accordion in that element
Here is a mockup of what I'm trying to get it to look like Photo Mockup
My current HTML
<div id="faqs-container" class="accordian">
<h3><a href="#">One</a></h3>
<div class="accordian">
I really want a list here!
<h3><a class=href="#">A</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
<h3><a href="#">B</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</div>
<h3><a href="#">Two</a></h3>
<div class="accordian">
<ul>
<li>But They</li>
<li>Do Not</li>
<li>Work</li>
</ul>
<h3><a href="#">A2</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
<h3><a href="#">B2</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</div>
</div>
Jquery
$("div.accordian").accordion({
autoHeight: false,
collapsible: true,
active: false
});
Running the code like this generates a good nested accordion for the first section but the second section renders incorrectly. It looks like jQuery starts grabbing the fist html element after the header to build the accordion.
I have specified the header option when calling accordian as follows
$("div.accordian").accordion({
autoHeight: false,
collapsible: true,
active: false,
header: 'h3'
});
This gets close to the desired effect. The list renders in the correct place but the nested accordion in the second section is non functional.
I have a Fiddle set up
This should work
<div id="faqs-container" class="accordian">
<h3><a href="#">One</a></h3>
<div class="accordian">
I really want a list here!
<h3><a class=href="#">A</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
<h3><a href="#">B</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</div>
<h3><a href="#">Two</a></h3>
<div> <-- A Wrapper -->
<ul>
<li>But They</li>
<li>Do Not</li>
<li>Work</li>
</ul>
<div class="accordian">
<h3><a href="#">A2</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
<h3><a href="#">B2</a></h3>
<div>
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</div>
</div>
</div>
Demo: Fiddle
For the tab Two
you need to create another wrapper element and place the ul
and child accordion
as its children
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With