title: jQuery Accordion and loading content through AJAX
body: <p>I would like to load the content under each jQuery <a href="http://docs.jquery.com/UI/Accordion" rel="noreferrer">accordion</a> header using the jQuery <a href="http://docs.jquery.com/Ajax/load" rel="noreferrer">load</a> command. Currently, I have set this up as the following</p>
  
  <pre><code>$(function() {
  
      $("#accordion").accordion({          
          header: "h2",
          active: false              
      });
  
      $("h2", "#accordion").click(function(e) {
          var contentDiv = $(this).next("div");
          contentDiv.load($(this).find("a").attr("href"));      
      });                    
  });
  </code></pre>
  
  <p>and the HTML (<em>relevant snippet</em>)</p>
  
  <pre><code>&lt;div id="accordion"&gt;
      &lt;div&gt;
          &lt;h2&gt;&lt;a href="home.htm"&gt;Home&lt;/a&gt;&lt;/h2&gt;
          &lt;div&gt;
             &lt;!-- placeholder for content --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;h2&gt;&lt;a href="products.htm"&gt;Products&lt;/a&gt;&lt;/h2&gt;
          &lt;div&gt;
             &lt;!-- placeholder for content --&gt;       
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Any ideas greatly appreciated!</p>