Geek Answers Handbook

JQuery UI Nested Accordion with Top-Level Content Accordion

I am trying to create a navigation menu that contains several levels of organization. I am creating a jQuery nested user interface that works fine if all my content is at the lowest level (deepest) of the accordion socket. The problem is that some elements will have content and a sub-accordion. If I put some text in the direction of the upper accordion, it looks great ... but as soon as I wrap it in tags, it breaks the nested accordion in this element

Here is a mockup of what I'm trying to make it 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 such code generates a good nested accordion for the first section, but the second section does not display correctly. It seems that jQuery is starting to grab the hist element of the fist element after the title to build an accordion.

I specified the header parameter when calling accordian as follows

 $("div.accordian").accordion({ autoHeight: false, collapsible: true, active: false, header: 'h3' });

This is approaching the desired effect. The list is displayed in the correct place, but the nested accordion in the second section does not work.

I have Fiddle installed

+6
source share
2 answers

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 Two tab, you need to create another wrapper element and put ul and child accordion as your child elements

+6
source

Check out this script

You are correct that it looks at the next element after the title, so you can simply wrap the contents of the top-level accordion with a div, and then turn on the sub-accordion.

 <h3><a href="#">Two</a></h3> <div> <!-- This 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>
+2
source

More articles:


All Articles