jQuery accordion - OnCollapse and OnExpand events

Question

I have an accordion with single title like this

<div class="accordion" id="accordion_acquired_services">
    <h3><a href="#">Acquired services</a></h3>
    <table id="tbl_acquired_services">
        <tbody></tbody>
    </table>
</div>

What I'd like is to bind an event on accordion open and accordion close...

Actually what I'd like to achieve is to do an ajax request that would populate the accordion's content each time it is expanded...

oddly enough there is no onExpand/onCollapse events

so far I have this

$( "#accordion_acquired_services" ).bind( "accordionchange", function(event, ui) {   
    $('#tbl_acquired_services').html('');
    //trigger ajax
});

But that triggers on both occasions, when it is collapsed and when it is expanded... how do I know which is which?

Answer 1

I know it's a old thread but this really helped me

$( "#Accordion" ).accordion({
collapsible: true,
heightStyle: "content",
activate: function(event, ui) {

  if(ui.newHeader[0]){

    if( ui.newHeader[0].id =='ID of h3'){
        // run code here
      }
    }

  }

 }
});

Doing this check if there is a new header object which is not generated when you close an accordion only when you open one.