re-initialize jquery accordion on callback

Question

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

Answer 1

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.

Answer 2

Destroy the accordian before repopulating it with data.

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