Using the change event

Let's see how we can use these events in our accordion implementations. In accordion10.html, change the configuration object so that it appears as follows:

$(document).ready(function($) {
  var statustext;
  $("#myAccordion").accordion({
    activate: function(e, ui) {
      $(".notify").remove();
      Statustext = $("<div />", {
        "class": "notify",
         text: [
           ui.newHeader.find("a").text(), "was activated,",
           ui.oldHeader.find("a").text(), "was closed"
         ].join(" ")
      });
      statusText.insertAfter("#myAccordion").fadeOut(2000, function(){
        $(this).remove();
      });
    }
  });
});

Save this as accordion11.html. In this example, we use the activate configuration option to specify an anonymous callback function that is executed every time the active panel is changed. This function will automatically receive two objects as arguments. The first object is the event object, which contains the original browser...