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

Answer 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

Answer 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>