Question

I think I’m missing something simple here. Initially the accordion looks fine. I have an Ajax call that replaces and accordion but after it’s replaced, it doesn’t look like an accordion. Problem is distilled below.

Fiddle: http://jsfiddle.net/tzerb/5nJH7/

HTML:

<div id="theAcc">
    <h3><a href="#">1</a></h3>
    <div>One</div>
    <h3><a href="#">2</a></h3>
    <div>Two</div>
    <h3><a href="#">3</a></h3>
    <div>Three</div>    
</div>

​<button id="btnReplace">Replace</button>​​​​​​​​​​​​​​​​​​

Javascript:

$(function() {
    $( "#theAcc" ).accordion();
});

​$("#btnReplace").click(function() {
    $("#theAcc").html("<h3><a href='#'>A</a></h3><div>AAAA</div><h3><a href='#'>B</a></h3><div>BBBB</div><h3><a href='#'>C</a></h3><div>CCCC</div>");
});​​​​​​​​​​​​

Any feedback is appreciated.

TIA.

Answer 1

Here’s an updated jsFiddle that has the behavior you wish to see: http://jsfiddle.net/5nJH7/5/

The updated code is:

$(function() {
    $( "#theAcc" ).accordion();
});

$("#btnReplace").click(function() {
    $("#theAcc")
        .accordion("destroy");
        .html("<h3><a href='#'>A</a></h3><div>AAAA</div><h3><a href='#'>B</a></h3><div>BBBB</div><h3><a href='#'>C</a></h3><div>CCCC</div>")
        .accordion();
});​

You see the issues because you have partially destroyed HTML elements to which the accordion is bound (click events, etc.). Tearing down the accordion before doing the replace is likely the easiest way to get the expected behavior.