Question

You will see that on clicking divA , divAA will slide down. on clicking divB, divBB will slide down.

After clearing the main DIV and appending the same contents again, the accordion stops working as shown in this demo: http://jsfiddle.net/p7vUk/2/

Can somebody please explain why it stops working and how to fix it?

Answer 1

Your problem is the fact removing the original DOM objects that the accordion functionality attached itself to. Just because you add new ones doesn’t mean its the same thing. They are entirely new elements, and because of that you have to run the accordion functionality on them again.. Thats about as dumbed down as I can make it sound.

So try this..

function clearAndAdd() {

            $("#content").empty();
            $("#content").append('<div id="a">DIV ID A</div><div id="aa">DIV ID AA</div><div id="b">DIV ID B</div><div id="bb">DIV ID BB</div>');
            $("#content").accordion();
        } 

if that last new line doesn’t work try this instead

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