Вложенное меню аккордеона в jQuery

У меня есть меню, реализованное с использованием набора вложенных аккордеонов 1 и 2, каждый из которых содержит элементы a и b.

Я хотел бы реализовать следующую логику:

• Когда я нажимаю 1a, я получу данные 1a и два подменю 2a, 2b

• Когда я нажимаю 2a, 2b, я получу данные каждого из них соответственно.

Проблема

Желаемый результат:

• Я хочу отобразить дочерний элемент nth-most для последнего клика, сворачивая все остальные.
• При инициализации должны быть видны только 1a и 1b.

Текущий результат:

• Нажав 1b, затем на 2b, 1b все еще полностью виден.

Код JavaScript

$(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>