jQuery clean slideToggle for many elements at once

Question

I am using a slideToggle technique to show and hide 100+ DIVs full of information in my application. I have "Show All" and "Hide All" buttons and I'd like for them to have the slideToggle animation as well (instead of just showing and hiding all). However on IE6, the slideToggle runs really slow when being applied to each element.

Does anyone know how to speed this up? Also, I'm switching icons that are in the msg_head, but that isn't slowing it down. If I remove th slideToggle and replace it with just a show/hide (on the show all/hide all) it performs fine. However I'd like to have the animation if possible.

<p class="msg_head" onclick="toggleSelection($(this));">Heading</p>
<div class="msg_body">
   content
</div>

And my show all and hide all functions...

function toggleSelection(element) {
    element.next("msg_body").slideToggle(250);
    element.find(":first-child").toggleClass("ui-icon-circle-arrow-s");
    element.find(":first-child").toggleClass("ui-icon-circle-arrow-e");
}

function showall() {
    $(".msg_head").each(function() {
      $(this).next(".msg_body:hidden").slideToggle(250);
      $(this).find(":first-child").attr('class','ui-icon ui-icon-circle-arrow-s');
    });
}

function hideall() {
    $(".msg_head").each(function() {
      $(this).next(".msg_body:visible").slideToggle(250);
      $(this).find(":first-child").attr('class','ui-icon ui-icon-circle-arrow-e');
    });
}

For the record, the individual toggleSection() function performs flawlessly. And replacing the slideToggle in the showall and hideall functions with show and hide works well too. I'm really just seeing if there's a way to get the slideToggle animation without it looking choked up.

Answer 1

What version of jQuery are you using? If you're not using the latest (1.4.1) then I highly recommend upgrading. The developers of jQuery did a major performance overhaul for the latest version to address issues such as the one you describe above. Here is a link to the release notes for more information: http://jquery14.com/day-01/jquery-14

Answer 2

This isn't going to be much help, but I'm going to have to go with a simple "No" here. Simultaneously animating 100+ DIV's seems a bit much, but you might be able to get away with it when a visitor is running a modern browser on a decent machine. But if you're looking to speed this up specifically in IE6... there is not much you can do. The browser is ancient, including the javascript rendering engine, and will never be able to do what you're wanting it to while looking smooth and pretty.