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

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... jQuery UI object type for "ui" object passed to the callback function?

Thanks,

Matt.

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

You can access the contents of those ui.new|old elements easily. They are jQuery elements, that is why they look a bit odd.

jQuery way

ui.newHeader.first().html()

And if you need access to the dom element use .get()

ui.newHeader.get().first()