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

Revision 3 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<style type="text/css">
  .toggleClass { 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
jQuery toggle()
$('.togglecontainer div').toggle();
$('.togglecontainer div').toggle();
ready
jQuery toggleClass()
$('.togglecontainer div').toggleClass('.toggleClass');
$('.togglecontainer div').toggleClass('.toggleClass');
ready
jQuery add or removeClass()
$('.togglecontainer div').addClass('.toggleClass');
$('.togglecontainer div').removeClass('.toggleClass');
ready

Revisions

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