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

Revision 4 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 and removeClass()
$('.togglecontainer div').addClass('.toggleClass');
$('.togglecontainer div').removeClass('.toggleClass');
ready
jQuery hasClass
hc = $('.togglecontainer div').hasClass('.toggleClass');
$('.togglecontainer div')[hc ? 'removeClass' : 'addClass']('toggleClass');
hc = $('.togglecontainer div').hasClass('.toggleClass');
$('.togglecontainer div')[hc ? 'removeClass' : 'addClass']('toggleClass');
ready

Revisions

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