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

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

• javascript
• jquery
• jquery-ui

3 Answers 3

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

One improvement on undertakerors answer: use triple equals when paring 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.

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