title: Is it possible to display a jQuery modal dialog box with .toggle() method?
body: <p>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).</p>
  
  <pre><code>
  &lt;span id="SECTION_1_collapse"&gt;[+/-]&lt;/span&gt;&lt;br /&gt;
  &lt;div id="SECTION_1"&gt;
  &lt;table&gt;
  &lt;!-- Typically 100 cols x 250+ rows --&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;span id="SECTION_2_collapse">[+/-]&lt;/span&gt;&lt;br /&gt;
  &lt;div id="SECTION_2"&gt;
  &lt;table&gt;
  &lt;!-- Typically 100 cols x 250+ rows --&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  ...
  ...
  ...
  </code></pre>
  
  <p>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_<em>_collapse" are used to collapse the div elements with id="SECTION_</em>".</p>
  
  <p>Thanks ahead of time.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>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.</p>
  
  <p>Here is the relevant section without all of the plumbing code, dialog declaration, etc.</p>
  
  <pre><code>
  $('#SECTION_1_collapse').click(function(){
    $('#wait_dialog').dialog("open");
    $('#SECTION_1').toggle('slow', function(){
      $('#wait_dialog').dialog("close");
    });
  });
  </code></pre>