如果单击其父手风琴，如何折叠所有嵌套的手风琴？

Question

This is my jsfiddle

http://jsfiddle.net/DBYLk/18/

Once you click on Parent, then expand nested Accordions present under it.

Finally if you click Parent again, how to close all the nested Accordions under present under that?

This is the way I am creating Accordions:

$("div.accordian").accordion({
    heightStyle: "content",
    autoHeight: false,
    collapsible: true,
    clearStyle: true,
    active: false,
});

$("div.accordian").accordion({
    activate: function (event, ui) {
        createAccordian(event, ui);
    }
});

function createAccordian(activateEvent, activateUi) {
    var selectedeleemnt = activateUi.newHeader.text();
    if (selectedeleemnt != null && activateUi.newPanel.html() == '') {
        //do stuff to laod html here and then replace html below
        activateUi.newPanel.html(" \
                    <h3><a href='#'>Child1</a></h3> \
                    <div></div> \
                    <h3><a href='#'>Child2</a></h3> \
                    <div></div> \
                    <h3><a href='#'>Child3</a></h3><div>This doesn't have dynamic loaded accordion, just content</div>")
            .accordion({
            heightStyle: "content",
            autoHeight: false,
            collapsible: true,
            active: false,
            activate: function (event, ui) {
                createAccordian(event, ui);
            }                
        });
    }
}

Answer 1

Simply trigger the click event on the child headers of the accordion when you click on the parent.

Demo: http://jsfiddle.net/lotusgodkk/DBYLk/21/

$(document).on('click', '.ui-accordion-header', function () {
    $(this).next('.ui-accordion-content:first').find('.ui-accordion-header-active').trigger('click');
});