YouTip

# jQuery UI API - .toggleClass() ## Category (#) | (#) | (#) ## Usage **Description:** Adds or removes one or more classes from each matched element, based on the presence of the class or the value of the switch argument, when animated style changes occur. **Returns:** (http://api.jquery.com/Types/#jQuery) .toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] ) | Parameter | Type | Description | Default | | --- | --- | --- | --- | | className | String | One or more class names to be toggled for each element in the matched set, separated by spaces. | | | switch | Boolean | A Boolean value to determine whether the class should be added or removed. | | | duration | Number or String | A string or a number determining how long the animation will run. | 400 | | easing | String | A string indicating which (#) function to use. | swing | | complete | Function() | A function to call once the animation is complete. | | .toggleClass( className [, switch ] [, options ] ) | Parameter | Type | Description | | --- | --- | --- | | className | String | One or more class names to be toggled for each element in the matched set, separated by spaces. | | switch | Boolean | A Boolean value to determine whether the class should be added or removed. | | options | Object | All animation settings. All properties are optional. * **duration** (default: `400`) Type: Number or String Description: A string or a number determining how long the animation will run. * **easing** (default: `swing`) Type: String Description: A string indicating which (#) function to use. * **complete** Type: Function() Description: A function to call once the animation is complete. * **children** (default: `false`) Type: Boolean Description: A Boolean indicating whether to apply animations to all descendants of the matched elements. This feature should be used with caution, as determining whether an element is a descendant of an animation is expensive and grows linearly with the number of descendants. * **queue** (default: `true`) Type: Boolean or String Description: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. **Since jQuery 1.7**, the queue option also accepts a string, in which case the animation is added to the queue represented by that string. | Similar to native CSS transitions, jQuery UI's class animations provide a smooth transition from one state to another while ensuring that all style changes are handled via CSS, without the need for JavaScript. All class animation methods, including `.toggleClass()`, allow for custom animation durations and (#) functions, and also provide a callback upon animation completion. Not all styles can be animated. For example, animating background images. Any styles that cannot be animated will change at the end of the animation. This plugin extends the built-in jQuery [.toggleClass()](#) method. If jQuery UI is not loaded, calling the `.toggleClass()` method will not fail outright because the method exists in jQuery. However, the expected behavior will not occur. ## Example Toggle the class "big-blue" on the matched elements. div { width: 100px; height: 100px; background-color: #ccc; } .big-blue { width: 200px; height: 200px; background-color: #00f; } $( "div" ).click(function() { $( this ).toggleClass( "big-blue", 1000, "easeOutSine" );}); (#) [](#)[jQuery UI API – .toggle()](#) [jQuery UI API – Transfer Effect](#)[](#)