How do you replace CSS/toggle a large amount of elements?
<p><strong>EDIT:</strong> The question morphed into how to optimize a massive CSS change to 700 or more divs. I'm leaving the old question below to describe my original approach.</p>

<p>I have the following jQuery but it is not behaving as I expect. There are around 700 divs with class gr so hiding them takes a noticeable time. I am trying to do:</p>

<ol>
<li>When "Show/hide Pronunciation" is clicked, immediately change that text to "Working"</li>
<li>Wait until all 'div.gr' are hidden/shown</li>
<li><p>"Working" goes back to "Show/hide Pronunciation"</p>

<pre><code>$(document).ready(function () {
 $('#togglePron').click(function() {
   $('#togglePron').html("Working...");
   $('div.gr').toggle();
   $('#togglePron').html("Show/hide Pronunciation");
  });
});
...
... 
&lt;div class="pronlink" id="togglePron"&gt;Show/hide P&lt;/div&gt;

&lt;div class="gr"&gt;hai&lt;/div&gt;&lt;div class="zi"&gt;A&lt;/div&gt;
&lt;div class="gr"&gt;nao&lt;/div&gt;&lt;div class="zi"&gt;B&lt;/div&gt;  
etc.
</code></pre></li>
</ol>

<p>Thanks to Mike Lentini <a href="http://jsfiddle.net/SVf5k/4/" rel="nofollow">there's a jsfiddle for this question.</a></p>

<p><strong><a href="http://freezoo.alwaysdata.net/readhash8.py" rel="nofollow">This is the full page I'm working on</a></strong></p>

<p>The behavior I observe is that "Show/hide P" takes a noticeable time to change, then it changes briefly to "Working", and it goes back to "Show/hide". So is jQuery bunching together both the html() and .toggle(), instead of running html() first?</p>

<p>This seems to be browser specific because in Opera it does what I want. In IE 7 and Chrome 18, the behavior is as I described. Is there a way to make the behavior I want in Chrome happen? Or a better way to do what I am describing?</p>
