title: jquery dynamically add to accordion
body: <p>Using the <a href="http://jqueryui.com/demos/accordion/#fillspace" rel="nofollow noreferrer">example from jQuery UI</a>, I tried dynamically adding a section to the accordion (based on <a href="https://stackoverflow.com/questions/910645/add-items-to-a-jquery-accordion-with-jquery">this</a>), but I can't get the accordion to resize properly. The new section overflows the accordion container, and when it's clicked, it gets squished into the container, hiding the section contents. See <a href="http://jsfiddle.net/ZU4S7/" rel="nofollow noreferrer">fiddle</a>. </p>
  
  <p><strong>How can I add a section and get the accordion to resize?</strong></p>
  
  <pre><code>$(function() {
      $("#accordion").accordion({
          fillSpace: true
      });
  
      // I want to dynamically add sections to the accordion,
      // but it doesn't resize properly...
      $("#accordion")
                  .append('&lt;h3&gt;&lt;a href="#"&gt;New Section&lt;/a&gt;&lt;/h3&gt;&lt;div&gt;&lt;p&gt;hello world&lt;/p&gt;&lt;/div&gt;')
                  .accordion("destroy")
                  .accordion({ fillSpace:true })
                  .accordion("resize")
          ;
  
      $("#accordionResizer").resizable({
          minHeight: 140,
          resize: function() {
              $("#accordion").accordion("resize");
          }
      });
  });
  </code></pre>