Is it possible to display a jQuery modal dialog box with .toggle() method?

Question

For the typical AJAX request to the server I bind ajaxStart and ajaxStop events to the opening and closing of a modal jQueryUI dialog box. However, I have another use case where there are 1 or more divs (usually 5 sections) which contain fairly large tables displaying rows of data retrieved from the database. I have noticed a considerable lag when toggling the CSS display property of a section (shown below).

<span id="SECTION_1_collapse">[+/-]</span><br />
<div id="SECTION_1">
<table>
<!-- Typically 100 cols x 250+ rows -->
</table>
</div>

<span id="SECTION_2_collapse">[+/-]</span><br />
<div id="SECTION_2">
<table>
<!-- Typically 100 cols x 250+ rows -->
</table>
</div>
...
...
...

Is it possible, or has anyone ever displayed a modal jQueryUI dialog box when using the .toggle() method? In this case the span elements with id="SECTION_*collapse" are used to collapse the div elements with id="SECTION*".

Thanks ahead of time.

EDIT:

Yes. It is possible. The answer was in the .toggle() handler. There is still a little lag on the click event but overall there is lost less dead time and at last some feedback during the execution. Caching some of the jQuery objects helped as well.

Here is the relevant section without all of the plumbing code, dialog declaration, etc.

$('#SECTION_1_collapse').click(function(){
  $('#wait_dialog').dialog("open");
  $('#SECTION_1').toggle('slow', function(){
    $('#wait_dialog').dialog("close");
  });
});

Answer 1

The following will .toggle() between showing the table and open / closing the dialog and hiding the table. The delay is provided by setTimeout().

This toggle alternates between executing two anonymous functions. The first one opens the dialog box, shows the table, then after a pause closes the dialog box. The second one simply hides the table.

  // Set up a variable to hold the dialog box:
var $dialog = $("<div>").html("I'm busy.").dialog({autoOpen: false,
                                                   // other options
                                                   // ...
                                                   title: 'Status'});

  // Initially have the table hidden.
$("#SECTION_1").hide();

  // Setup the toggle for the show and hide
$('#SECTION_1_collapse').toggle(function(){

      // Show the "loading..." dialog box
    $dialog.dialog("open"); 

      // Show the table... this might take a while
    $("#SECTION_1").show();

      // Close the dialog box after a while... experiment w the timing
    setTimeout(function() { $dialog.dialog("close"); }, 1500);

}, function() {

      // No need for fancy dialog boxes when we hide the big table
    $("#SECTION_1").hide();

});

jsFiddle example