JQuery UI Accordion “navigation: true” failed on nested

accordionjquery-uinested-lists

I am building an Accordion Menu using jQuery UI. But it appears to me that the navigation: true setter does not work for a nested <ul> tag.

navigation: true works for Header A -> Link 1, Header B -> Link 2, but not for anything in subHeader under Header B (Link 3, Link 4).

May I know if I am using an incorrect structure so that the Accordion fails to function as expteced? Thank you!

Here is the jQuery:

<script type="text/javascript">
$(document).ready(function() {
    $("#accordion").accordion({
        navigation: true,
        active: false,
        header: 'h3',
        collapsible: true
    });
});
</script>

Here is the HTML structure:

Header A

<a href="#">Link 1</a>

Header B

<a href="#">Link 2</a>

subHeader A

<a href="#">Link 3</a>

subHeader B

<a href="#">Link 4</a>

<div id="accordion">
 <h3>Header A</h3>
 <ul>
  <li><a href="#">Link 1</a></li>
 </ul>

 <h3>Header B</h3>
    <ul>
        <li><a href="#">Link 2</a></li>
        <li>
         <h4>subHeader A</h4>
                <ul>
                    <li>
                        <a href="#">Link 3</a>
                    </li>
                </ul>
         <h4>subHeader B</h4>
                <ul>
                    <li>
                        <a href="#">Link 4</a>
                    </li>
                </ul>   
            </li>
       </ul>

</div>

Best Answer

Maybe this problem / answer is what you are looking for :)
Nested accordion menu in jQuery

Related Solutions

Jquery – Link to open jQuery Accordion

The navigation option isn't for panel activation. It's for telling the user where they are.

Using simplified html code:

<div id="accordion">

    <div>
        <h2><a href="#services">Services</a></h2>
        <p>More information about all of these services</p>
    </div>

    <div>
        <h2><a href="#about">About</a></h2>
        <p>About us</p>
    </div>

</div>

You put the unique ID in the Hyperlink in the title

Then the jQuery (simplified):

<script type="text/javascript">
    $(function(){
        $("#accordion").accordion({ header: "h2", navigation: true });
     });
</script>

The "navigation : true" will enable you to go www.site.com/#about which makes the "about" panel selected. For activation, there are a couple of ways. Perhaps one way is to grab a query string and put it into the jQuery.

With C#

$("#accordion").accordion("activate", '<%= Request.QueryString["id"] %>');

With PHP

$("#accordion").accordion("activate", '<?php echo $_GET['id']; ?>');

Which will allow you to specify which panel to open by www.site.com?id=2

Jquery UI Nested Accordion with Content in top level Accordion

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

Related Topic