CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-accordion
Nic Hubbard
Nic Hubbard

Reputation: 42139

jQuery Accordion know when panel finished opening

I am using jQuery Accordion and need to know when a panel has finished loading. I understand that I need to bind the accordionchange event, but I am really confused from there how I will know when a panel has opened.

If I just put an alert() inside the function it DOES show after the panel has opened, but it also shows after the panel is closed:

$("#campaigns").accordion({ 
    event: 'click',
    active: false,
    collapsible: true,
    autoHeight: false,
    heightStyle: "content"
}).bind("accordionchange", function(event, ui) {
    alert('Panel opened and closed');
});

How can I only know when the panel has finished opening?

Upvotes: 2

Views: 1940

Answers (2)

Nic Hubbard
Nic Hubbard

Reputation: 42139

Finally got it working how I wanted. Here is how I know when opening a panel:

$("#campaigns").accordion({ 
    event: 'click',
    active: false,
    collapsible: true,
    autoHeight: false,
    heightStyle: "content",
    change: function(event, ui) {

        // See if we are opening a panel
        var allOpen = ui.oldHeader.length == 1 && ui.newHeader.length == 1 && ui.oldContent.length == 1 && ui.newContent.length == 1;
        var newOpen = ui.newHeader.length == 1 && ui.newContent.length == 1;
        if (allOpen || newOpen) {

            // Do something here each time the panel is opened

        }//end if

    }//end change
});

Strangely, change seems to not be documented...

Upvotes: 1

Sudipta Chatterjee
Sudipta Chatterjee

Reputation: 4670

http://api.jqueryui.com/accordion/#event-activate - look at the event - it is triggered when a panel is activated (opened).

Upvotes: 2

Related Questions