JQueryUI calling .accordion twice on one id

Question

I'm trying to use AJAX to dynamically generate a JquerUI Accordion based on what is selected in a box. Currently I have

 <div style="display:none" id="testselect">
 </div>

With JS

$("#courseselect").change(function () {
                $("#testselect").html(""); // Empty any previous data
                $("#testselect").css("display", "block"); // Display it if it was hidden
                $.getJSON('json.php?show=tests&courseid=' + $(this).val(), function(data) { 
                for(x in data)
                {
                    $("#testselect").append("<h3 value=\"" + data[x].uno + "\"><a href=\"#\">" + data[x].name + "</a></h3>");
                    $("#testselect").append("<div>Foo</div>");
                }
                $("#testselect").accordion({ change:function(event, ui) {  courseid = ui.newHeader.attr("value");
                 } });
            });
      });

Now this works the first time I change my selection, but after that it reverts to plain old unformatted HTML. As if the call to .accordion() was never done. I'm guessing this has something to do with JQuery not wanting me to format something twice, but I really have no idea.

Answer 1

Try to destroy the accordion before you empty the div and start again:

$("#courseselect").change(function () {
    $("#testselect")
        .accordion("destroy")
        .empty() // equivalent to .html("");
    $.getJSON(...

More info here.

Good luck!