jQuery Accordion and loading content through AJAX

Question

I would like to load the content under each jQuery accordion header using the jQuery load command. Currently, I have set this up as the following

$(function() {      $("#accordion").accordion({                   header: "h2",         active: false                   });      $("h2", "#accordion").click(function(e) {         var contentDiv = $(this).next("div");         contentDiv.load($(this).find("a").attr("href"));           });                     }); 

and the HTML (relevant snippet)

<div id="accordion">     <div>         <h2><a href="home.htm">Home</a></h2>         <div>            <!-- placeholder for content -->         </div>     </div>     <div>         <h2><a href="products.htm">Products</a></h2>         <div>            <!-- placeholder for content -->                </div>     </div> </div> 

Now this all works fine, but there is a problem in that loading content in this manner interrupts the slide down animation of the accordion plugin on some browsers (IE6), and on others (FF), the slide down animation does not occur.

I'm thinking that I would need to prevent the slide down animation from occurring until the content has loaded (using the load callback function) but am unsure how to hook this into the accordion plugin.

Any ideas greatly appreciated!

Answer 1

Just a quick heads up.

None of these answers will work as expected with the latest API as since jQuery UI 1.9 the events change and changestart have been altered to 'activate' and 'beforeActivate' respectively.

Hope that saves someone a few minutes.