I have a div, that holds a div.
like this:

<div id='reportHolder' class='column'>
  <div id='report'> </div>
</div>

Within the inner div, I add a bunch (7-12) of pairs of a and div elements, like this:

<h4><a>Heading1</a></h4>
<div> ...content here....</div>

The total size of the content, is maybe 200k. Each div just contains a fragment of HTML.

After I add all the content, I then create an accordion. like this:

$('#report').accordion({collapsible:true, active:false});

This all works fine.

The problem is, when I try to clear or remove the report div, it takes a looooooong time, and I get 3 or 4 popups asking "Do you want to stop running this script?"

I have tried several ways:

option 1:

    $('#report').accordion('destroy');
    $('#report').remove();
    $("#reportHolder").html("<div id='report'> </div>");

option 2:

    $('#report').accordion('destroy');
    $('#report').html('');
    $("#reportHolder").html("<div id='report'> </div>");

option 3:

    $('#report').accordion('destroy');
    $("#reportHolder").html("<div id='report'> </div>");

No matter what, it hangs for a long while.

The call to accordion('destroy') seems to not be the source of the delay. It's the erasure of the html content within the report div.

EDIT - fixed typo.

ps: this happens on FF3.5 as well as IE8 .

Questions:

1. What is taking so long?

2. How can I remove content more quickly?