Jquery dynamically adds to an accordion

Question

Using an example from the jQuery user interface , I tried to dynamically add a section to the accordion (based on this ), but I cannot get the accordion to resize correctly. The new section overflows the accordion container, and when it clicks, it falls into the container, hiding the contents of the section. See fiddle .

How to add a section and resize the accordion?

$(function() { $("#accordion").accordion({ fillSpace: true }); // I want to dynamically add sections to the accordion, // but it doesn't resize properly... $("#accordion") .append('<h3><a href="#">New Section</a></h3><div><p>hello world</p></div>') .accordion("destroy") .accordion({ fillSpace:true }) .accordion("resize") ; $("#accordionResizer").resizable({ minHeight: 140, resize: function() { $("#accordion").accordion("resize"); } }); }); 

Answer 1

If you remove the height attribute on accordionResizer ( height:220px ), everything works as it should. It seems that the height you have chosen is too small for the content - hence overflow.

If you need something other than the default height to match the content, try dynamically assigning the height of the accordion each time you add a new section.

sort of...

 var height = $("#accordion h3").size() * $("#accordion h3:first").height() + 50; // add 50px to allow room for the section contents. $("#accordionResizer").height(height); 

Answer 2

jQuery UI Accordion takes the size of an element from the moment it is called. You will need to call some kind of update method.

Answer 3

The question and answer are beautiful (since you can still destroy and recreate the accordion), but are now dated with the introduction of jQuery 1.10.0, adding a new refresh that handles the resizing penalty. Given the new version of jQuery, I will now write code as follows:

 $(function() { // Add the following parameters otherwise the last entry // added to the accordion will be active after the refresh. // $("#accordion").accordion({ collapsible: true, // Let you squash all of the headings active: false // Defaults to having all of the headings squashed }); // Now you can dynamically add to the accordion and refresh it. // $("#accordion") .append('<h3><a href="#">New Section</a></h3><div><p>hello world</p></div>') .accordion("refresh"); // A graceful recreation of the accordion. });