JQueryUI accordion changestart event - how to get data out of it?

Question

http://jqueryui.com/demos/accordion/#event-changestart

I'm trying to have an JQuery ajax request get some data and populate the body of a div inside each of my JQueryUI accordion rows when the row is expanded. My intention is to have a hidden field, or some such, within the clickable h3's of the accordion and when the changestart event fires the ajax will go off and get a unique page for that accordion row and fill it with useful html.

My problem is that I can't seem to find any information about the properties or values attached to the objects returned in the changestart event function parameters. Does anyone know how to do this or get those values?

The code I have right now is this:

$("#accordion").accordion({
                collapsible: true,
                active: false,
                changestart: function(event, ui) {
                    alert('hello:' + event.target.id + ':' + ui.id);
                }
            });

Which throws up an alert displaying the message hello:accordion:undefined

I've seen this post which seems to be along the lines of what I'm trying to figure out... http://stackoverflow.com/questions/2027516/jquery-ui-object-type-for-ui-object-passed-to-the-callback-function

Thanks,

Matt.

Answer 1

Looks like ui holds this:

$('.ui-accordion').bind('accordionchangestart', 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
});