Question

I have a large set (around 100) of page elements that I would like to toggle (show/hide) with jQuery.
I just use $(".toggleElementClass").toggle(); This looks like the trivial solution.

The problem is this takes a few seconds, even on the latest Chrome browser. Is there a faster, more efficient way to achieve the same effect.

Answer 1

You can reduce the amount of work the browser has to do by leveraging stylesheets to key all the display changes off a single attribute change — typically, the classname of an ancestor element. This means you can cause them all to change at once rather than one-by-one, reducing the number of reflows and improving speed. For example:

<style type="text/css">
    #mything p.toggled { display: none; }
    #mything.toggled p { display: none; }
    #mything.toggled p.toggled { display: block; }
</style>

<div id="mything">
    <p> foo </p>
    <p> bar </p>
    <p> bof </p>
    <p> zot </p>
</div>

<button id="toggle-all">all</button>

<script type="text/javascript">
    $('#mything>p').click(function() {
        $(this).toggleClass('toggled');
    });
    $('#toggle-all').click(function() {
        $('#mything').toggleClass('toggled');
    });
</script>