JQueryUI calling .accordion twice on the same id

Question

I am trying to use AJAX to dynamically create a JquerUI accordion based on what is selected in the field. I am currently

 <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 for the first time when I change my choice, but after that it returns to the old unformatted HTML. As if the .accordion () call had never been made. I guess this has something to do with jQuery, not wanting me to format something twice, but I really don't know.

Answer 1

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

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

More details here .

Good luck