Question

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?

Answer 1

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…