jquery dynamically add to accordion

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

jQuery UI Accordion takes the element size from when it's called. You'd have to call some kind of refresh method on it.