Question

EDIT: 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.

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:

1. When “Show/hide Pronunciation” is clicked, immediately change that text to “Working”
2. Wait until all ‘div.gr’ are hidden/shown

3. “Working” goes back to “Show/hide Pronunciation”

   $(document).ready(function () {
    $('#togglePron').click(function() {
      $('#togglePron').html("Working...");
      $('div.gr').toggle();
      $('#togglePron').html("Show/hide Pronunciation");
     });
   });
   ...
   ... 
   <div class="pronlink" id="togglePron">Show/hide P</div>
   
   <div class="gr">hai</div><div class="zi">A</div>
   <div class="gr">nao</div><div class="zi">B</div>  
   etc.
   

Thanks to Mike Lentini there’s a jsfiddle for this question.

This is the full page I’m working on

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?

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?

Answer 1

One way would be to dynamically modify your css styles directly (not per element) using javascript.

In your page, all of the text divs in each <td> have a class='gr' in them WITH an inline style="display:block;". First I’d move the display:block; into the style sheet (preferably into the first position).

Using this SO answer (and this page, also this SO answer), I’d go through each of the stylesheets until you got the one your interested in (adding a title to the <css /> will allow you to easily do this). Remove the display block (which is a simple stylesheet.deleteRule(<index>) index will be zero because you put it first in .css). Add a new display:none;.

This will essentially change the whole css for the page vs changing them individually PER element as you’re forced to do with JQuery.

Maybe not the most popular solution but still allows you to keep your current design (not duplicating the information) and uses css for what its suppose to do (tho ‘dynamic’).

---

Follow up:
Nice find with the “Totally Pwn CSS with Javascript” . Does exactly what I would do in your situation (wanted to add it here for posterity 🙂 )

On a side note, someone should make a feature request to JQuery to be able to do something like this with ease. 🙂

---

Follow Up 2: just realized someone else posted solution this before me

Another way you can do this is to remove the ‘gr’ class and add another ‘grHide’ class.
Check out this fiddle to see what I mean.

Do as I said above, move the inline display:block; into the css stylesheet under the .gr class. Add a separate class that does everything .gr does but do a display:none; instead.

This should allow you to use jquery AND still have it be very quick. The fiddle is quick anyways.