How to collapse all the nested Accordions if clicked on its parent Accordion?

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');
});