Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
Effects
Add Class
Remove Class
Switch Class
Toggle Class
Show
Hide
Toggle
Animate
Effect
Utilities
Position
About jQuery UI
Getting Started
Upgrade Guide
Changelog
Roadmap
Subversion Access
UI Developer Guidelines
Theming
Theming jQuery UI
jQuery UI CSS Framework
ThemeRoller application
Theme Switcher Widget

Functional demo:

toggleClass

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
Run Effect

Click the button above to preview the effect.


Warning: fopen(/srv/jqueryui.com/htdocs/libraries/cache/3759ecf0744e0a77dc0bedee133c78e1) [function.fopen]: failed to open stream: No such file or directory in /srv/jqueryui.com/htdocs/libraries/fetch_documentation_page.php on line 29

Warning: fwrite(): supplied argument is not a valid stream resource in /srv/jqueryui.com/htdocs/libraries/fetch_documentation_page.php on line 30

Warning: fclose(): supplied argument is not a valid stream resource in /srv/jqueryui.com/htdocs/libraries/fetch_documentation_page.php on line 31

Overview

toggleClass( class, [duration] )

Adds the specified class if it is not present, and removes the specified class if it is present, using an optional transition.

Dependencies

  • Effects Core

Example

Adds the 'selected' class if it is not present, and removes the 'selected' class if it is present.

$("p").click(function () {
      $(this).toggleClass("selected", 1000);
    });


<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script>
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<style type="text/css">
  p { cursor: pointer; font-size: 1.2em; }
  .selected { color:red; }
</style>
  <script type="text/javascript">
  $( document ).ready( function() {
    $("p").click(function () {
      $(this).toggleClass("selected", 1000);
    });
  } );
  </script>
</head>
<body style="font-size:62.5%;">
  
<p>Click me to toggle 'selected' class.</p>
<p class="selected">Click me to toggle 'selected' class.</p>
<p>Click me to toggle 'selected' class.</p>

</body>
</html>

Arguments

  • class

    Type:
    String

    A CSS class to toggle on the elements.

  • duration

    Type:
    String, Number
    Optional

    A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).