Nested accordion menu in jQuery

Question

I have a menu implemented using a set of nested accordions, 1 and 2, each with elements, a and b.

I would like to implement the following logic:

• When I click 1a, I will get the data of 1a and two submenu 2a,2b

• When I click 2a, 2b I will get the data of each, respectively.

The problem

Desired result:

• I only want to display the nth-most child element for the last click, collapsing all others.
• Upon initialization, only 1a and 1b should be visible.

Current result:

• Clicking on 1b, then on 2b, 1b is still fully visible.

JavaScript code

$(document).ready(function() {
    $("#acc1").accordion({
        active:".ui-accordion-left",
        alwaysOpen: false,
        autoheight: false,
        header: 'a.acc1',
        clearStyle: true
    });
    $("#acc2").accordion({
        alwaysOpen: false,
        autoheight: false,
        header: 'a.acc2',
        clearStyle: true
    });
});

HTML:

<ul id="acc1" class="ui-accordion-container">
    <li>
        <div class="ui-accordion-left"></div>
        <a class="ui-accordion-link acc1">1a
            <span class="ui-accordion-right"></span>
        </a>
        <div>
            data of 1a<br/>
            data of 1a<br/>
            data of 1a<br/>
        </div>
        <div>
            <ul class="ui-accordion-container" id="acc2">
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc2">2a
                        <span class="ui-accordion-right"></span>
                    </a>
                    <div>
                        data of 2a<br/>
                        data of 2a<br/>
                        data of 2a<br/>
                    </div>
                </li>
                <li>
                    <div class="ui-accordion-left"></div>
                    <a class="ui-accordion-link acc2">2b
                        <span class="ui-accordion-right"></span>
                    </a>
                    <div>
                        data of 2b<br/>
                        data of 2b<br/>
                        data of 2b<br/>
                    </div>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="ui-accordion-left"></div>
        <a class="ui-accordion-link acc1">1b
            <span class="ui-accordion-right"></span>
        </a>
        <div>
            data of 1b<br />
            data of 1b<br />
            dta of 1b <br />
        </div>
    </li>
</ul>

Answer 1

Just a few changes to the order of the elements in your HTML and you get the behavior you are looking for. At the start now only 1a and 1b are open. Similarly when you click on 1b now it will close 1a which will hide any open 2a/2b section as well.

    $(document).ready(function() {
        $("#acc1").accordion({
            active:".ui-accordion-left",
            alwaysOpen: false,
            autoheight: false,
            header: 'a.acc1',
            clearStyle: true
        });
        $("#acc2").accordion({
            active:".ui-accordion-left",
            alwaysOpen: false,
            autoheight: false,
            header: 'a.acc2',
            clearStyle: true
        });
    });

    <ul id="acc1" class="ui-accordion-container">
        <li>
            <div class="ui-accordion-left">
            </div>
            <a class="ui-accordion-link acc1">1a
                <span class="ui-accordion-right"></span>
            </a>
            <div>
                data of 1a<br/>
                data of 1a<br/>
                data of 1a<br/>
                <ul class="ui-accordion-container" id="acc2">
                    <li>
                        <div class="ui-accordion-left">
                        </div>
                        <a class="ui-accordion-link acc2">2a
                            <span class="ui-accordion-right"></span>
                        </a>
                        <div>
                            data of 2a<br/>
                            data of 2a<br/>
                            data of 2a<br/>
                        </div>
                    </li>
                    <li>
                        <div class="ui-accordion-left">
                        </div>
                        <a class="ui-accordion-link acc2">2b
                        <span class="ui-accordion-right"></span></a>
                        <div>
                            data of 2b<br/>
                            data of 2b<br/>
                            data of 2b<br/>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <div class="ui-accordion-left"></div>
            <a class="ui-accordion-link acc1">1b
            <span class="ui-accordion-right"></span></a>
            <div>
                data of 1b<br />
                data of 1b<br />
                dta of 1b <br />
            </div>
        </li>
    </ul>
</body>