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

Question

For a typical AJAX request to the server, I associate the ajaxStart and ajaxStop events with opening and closing the modal jQueryUI dialog box. However, I have another use case when there are 1 or more divs (usually 5 partitions) that contain fairly large tables displaying rows of data retrieved from the database. I noticed a significant lag when switching the display properties of the CSS 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 the modal jQueryUI dialog box ever been displayed using the .toggle () method? In this case, span elements with id = "SECTION__collapse" are used to discard div elements with id = "SECTION _".

Thanks in advance.

EDIT:

. . .toggle(). - click, , , . jQuery .

, ..

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

Answer 1

. toggle() / . setTimeout().

. , , . .

  // 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