Accordion does not work when loaded later via Ajax

[abtrapp]

The accordion standard sample (​http://ui.jquery.com/demos/accordion/#default) works perfect, if it loads with the complete form.

When it is loaded via Ajax (inside of a jQuery Ajax Tab) and is initialized with:

jQuery('#payment_type').each(function(item) {jQuery(this).accordion ({header: "h3"});});

every content is set to style="... height: 0" - so all headers are attached together and the content is below them.

[Scott González]

I believe the real problem is that the heights are not being calculated properly if the accordion is not attached to the DOM.

[justin.obara]

This sounds like a problem that I was having, that could be solved by using the options clearStyle: true and autoHeight: false. However, in 1.6rc6 there is a bug which throws an error in IE when using these options. This is supposed to be fixed in trunk though ( ​http://dev.jqueryui.com/ticket/4100 )

[naz]

I had a same problem, how ever cleadStyle and autoHeight did not work for me. The only way I managed to fix was destroying accordion and call it again.

$('#navigation').tabs({ 
    show: function(ui) {
        $("#packages").tabs('destroy').tabs({ 
            show: function(ui) {
               $('#offers').accordion('destroy').accordion(accordionConfig);
            } 
        });
    } 
});

[Scott González]

Duplicate of #3905.