jQuery UI | toggle() Method
jQuery UI framework provides toggle() method to display the switch between show or hide functionalities depending on the status of the selected elements and the type of toggle effect chosen by the user.
(selector).toggle( effectType [, options ] [, duration ] [, complete ] )
Parameters: This method accepts four parameters as mentioned above and described below:
- effectType: The type is string. It specifies the type of the effect which is used for the toggle transition.
- options: The type is object . It specifies the effects oriented specific setting for easing options.
- duration: The types are number or string . This specifies about, how long the toggle effect should run. For example “fast”, “slow” or default value 400 ms.
- complete: This is the callback method which is called when the toggle effect is completed.
Return Value: It returns the selected elements with the given toggle effect.
Links for jQuery UI:
Example 1: In the following example, the toggle() functionality is implemented in jQuery code with pulsate effect type which is passed as a parameter displaying the toggle effect for the matched elements. The pulsate effect type adjusts the opacity of the selected element in a switch on or off manner. The ui-widget-content and ui-widget-header are the in-built classes provided by the jQuery UI CSS framework to make the interface more interactive and beautiful.
Example 2: The jQuery UI framework provides toggle() method with many varieties of visual toggle effects as its parameter. In the following example code, we will demonstrate the method with a combobox menu options to select few toggle effect types. When the effect type is selected by the user, it is passed to toggle() method for the output, as shown in the output image. The programmer can write the code and choose effect types as parameters depending on the application’s requirement.