The accordion exposes two custom events. The change event is triggered every time the active header (and its associated content panel) is changed. It fires at the end of the content panel's opening animation, or if animations are disabled it is fired immediately. The other event is changestart that is fired as soon as the new header is selected, that is before the opening animation.
Let's see how we can use these events in our accordion implementations. In accordion11.html change the configuration object so that it appears as follows:
var accOpts = {
change: function(e, ui) {
$("<div>").addClass("notify ui-corner-all").text(ui.newHeader.find("a").text() + " was activated, " + ui.oldHeader.find("a").text() + " was closed").appendTo("body").fadeOut(5000, function(){ $(this).remove(); }); }
};
$("#myAccordion").accordion(accOpts);
});Save this as accordion12.html. In this example, we use the change configuration property to specify an anonymous callback function...