Question

Using the example from jQuery UI, I tried dynamically adding a section to the accordion (based on this), 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 fiddle.

How can I add a section and get the accordion to resize?

$(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 the accordionResizer (height:220px), everything works as it should. It looks like the height you’ve picked is too low for the contents – hence the overflow.

If you need something other than the default height to fit the contents, try dynamically assigning the height of the accordionResizer each time you add a new section.

something like…

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