CODEWITHSUNDEEP
jquerycallbackrenderingaccordion
aimlessWonderer
aimlessWonderer

Reputation: 205

re-initialize jquery accordion on callback

I've got the accordion working fine on pageload, however upon user interaction with some elements on the page, I am using ajax to rebuild the HTML of the accordion. Then, I try to re-initialize the accordion again with 

    $('#accordion').accordion({
        active: false,
        autoHeight: false,
        clearStyle: true,
        collapsible: true,
        header: 'h3'
    });

but... it doesn't seem to be taking.

The new block of rendered HTML isn't applying the accordion rules. Instead it just stays open as a large list.

I've even tried setTimeout() for re-calling the accordion just incase it was trying to initialize before the rendered HTML is returned in the callback.

The HTML that is rendered in the callback is the exact same as that of the pageload (with exception to the DOM additions that occur when the Accordion method is effective)

Upvotes: 6

Views: 6706

Answers (2)

Eggcellentos
Eggcellentos

Reputation: 1758

On any change I call:

$('#accordion').accordion( "refresh" )

You should avoid destroying and creating the accordion on each change, it doesn't make sense and it is bad for performance.

This works for all situations: added to, removed from or repopulated your data (or even unchanged data) and the accordion element will readjust itself.

Refresh (Docs) :

Process any headers and panels that were added or removed directly in the DOM and recompute the height of the accordion panels. Results depend on the content and the heightStyle option.

Upvotes: 0

Stefan Kendall
Stefan Kendall

Reputation: 67872

Destroy the accordian before repopulating it with data.

$('#accordion').accordion('destroy');

Upvotes: 13

Related Questions