jQuery .toggle() elements vs .toggleClass() + CSS toggling (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style type="text/css">
  .expanded {
    .toggledbyprevious { display: block; }
    .dirdown { display: none; }
    .dirup { display: inline-block }
  }
  .toggledbyprevious { display: none; }
  .dirdown { display: inline-block }
  .dirup { display: none; }
</style>
<div class='togglecontainer'>
  <div class='togglenext'>
    click
    <span class='dirup'>
      &uarr;
    </span>
    <span class='dirdown'>
      &darr;
    </span>
  </div>
  <div class='toggledbyprevious'>
    arrrr
  </div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
toggling via jquery
//$('.togglenext').click(function() {
  $(this).next('.toggledbyprevious').toggle();
  $(this).children('.dirdown').toggle();
  $(this).children('.dirup').toggle();
//});
ready
toggling via css
//$('.togglenext').click(function() {
  $(this).toggleClass('expanded');
//});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.