JQuery UI: Accordion callbacks

Question

I need my javascript to only do the callback when I OPEN a section on the accordion, as of right now it does a callback when I open OR close a section because I'm only using a click function. Is there a way I can modify my existing click function to only run when the given section is activated?

My current click function:

$("a#mimetypes").click(function() {
    $("span#mimetypesthrobber").loading(true, { max: 1500 })
    $.getJSON("../mimetypes", function(data) {
        //callback
    });
});

Thanks!

EDIT:

I already tried this with another part of the accordion and it wasn't working properly:

$('.ui-accordion').bind('accordionchange', function(event, ui) {
if (ui.newHeader == "Encoders") {
EncodersGet();
}
});

Answer 1

you can use the the " change event "

$('.ui-accordion').bind('accordionchange', function(event, ui) {
  ui.newHeader // jQuery object, activated header
  ui.oldHeader // jQuery object, previous header
  ui.newContent // jQuery object, activated content
  ui.oldContent // jQuery object, previous content
});

and access the "newHeadert" for example and do your processing

EDIT

according to the new info {collapsible: true, active: false}

$(document).ready(function() {
            var $acc = $('#accordion').accordion({ collapsible: true,
                   active : false ,
                   change : function (event, ui)
                   {
                                var index = $acc.accordion( "option", "active");
                    if( index === false){
                                 // all are close
                                }
                                else{
                                 // 0-based index of the open section
                                }

                   }
            });
        });

the "option, active" would return you the index of the open section or "false" if all sections are closed

Answer 2

One improvement on undertakerors answer: use triple equals when comparing index to false to avoid the first accordion element to match.

if (index === false) {
  // All are closed
} else {
  // 0-based index of the open section
}

Please remember that double equals will perform type conversion when evaluating conditions.

Answer 3

If all the accordion sections are closed by dfault you could replace the click event with toggle and have the second function simple do nothing.

$("a#mimetypes").toggle(function() {
    $("span#mimetypesthrobber").loading(true, { max: 1500 });
    $.getJSON("../mimetypes", function(data) {
        //callback 
    });
},
function() {
    //do nothing
});

The better solution would be to add a class to the active section and check for that class before calling the load.

$("a#mimetypes").click(function() {
    if ($(this).hasClass("active")) {
        $(this).removeClass("active");
    }
    else {
        $(".active").removeClass("active"); //Edit - remove all active classes to account for this section being closed by the opening of another
        $(this).addclass("active");

        $("span#mimetypesthrobber").loading(true, { max: 1500 });
        $.getJSON("../mimetypes", function(data) {
            //callback 
        });
    }
});