The jQuery UI framework classes and methods have definitely improved jQuery toggle() and toggleClass() methods making it more interactive for users and developers. jQuery UI provides in-built toggleClass() method which manages visual toggling effects by adding or removing CSS classes to matched or selected elements. It helps in changing from one CSS transition state to another maintaining all the style changes in jQuery code.
$(selector).toggleClass(className [, switch ] [, duration ] [, easing ] [, complete ] )
$(selector).toggleClass(className [, switch ] [, options])
Parameters: It accepts a parameter “className” which is the name of the class that are going to be added, toggled or removed for the selected elements. The type for “className” is string. More than one class are separated by space.
- switch: The type is Boolean . It helps the toggleClass() method to switch between add class or remove class depending on “true” or “false” values.
- duration: This option allows you to choose the time duration for the visual toggling effect in milliseconds. The types are number or string. The default value is 400 and possible values are “fast”, “slow”, “normal”.
- easing: The type is string. This option mentions, what kind of easing or progress is required for the toggling effect. Default value is “swing” for basic smooth transitions.
- complete: This is the callback method called when the toggling effect is completed for the selected elements. The callback functions can be used for handling user validations.
Return Value: It returns the selected elements with toggling new class.
Example 1: The following example demonstrates the toggleClass() method in the script section. It shows toggling effect by adding and removing “newToggleClass” class to container element by button click event.
Example 2: The following example demonstrates the toggleClass() method by adding and removing multiple classes namely “font-styles”, “padding” and “border” to paraId element by button click event.
- jQuery | toggleClass() with Examples
- jQuery | jQuery.fx.interval Property with example
- jQuery | jQuery.fx.off Property
- jQuery | jQuery.support Property
- jQuery | jquery Property
- jQuery UI | position() Method
- JQuery | parseHTML() method
- jQuery | css() Method
- jQuery | add() method with Example
- jQuery | not() method with Examples
- jQuery | ajaxStart() Method
- JQuery UI | Progressbar method
- jQuery | get() Method
- jQuery | fadeIn() Method
- jQuery | delegate() Method
- jQuery | outerHeight() Method
- jQuery | event.isDefaultPrevented() Method
- jQuery | outerWidth() Method
- jQuery | before() Method
- jQuery | off() Method
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.