Jquery UI Nested Accordion with Content in top level Accordion

Question

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

Solution 1

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

Solution 2

Check out this fiddle

You're correct that it looks at the next element after the header, therefore you can simply wrap the content of the top-level accordion with a div, then include your 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>

Comments

[user2027355]

Worked Perfectly...and DUH. Sometime you get so locked into a way of thinking that you can't see a easy solution! THANK YOU

[user2027355]

Same answer as Arun above...came in at almost the same time. Thanks for helping me!