Configuring the beforeActivate event

The beforeActivate event can be used in exactly the same way, and any callback function we specify using this event also receives the e and ui objects to use.

Change the configuration object from the last example to as follows:

$(document).ready(function($) {
  var statusText;
  $("#myAccordion").accordion({
    beforeActivate: function(e, ui) {
      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 accordion12.html. All that's changed is the property that we're targeting with our configuration object. When we run the page, we should find that everything is exactly as it was before, except that our notification is produced before the content panel animation...