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.
- jQuery | toggle() Method
- jQuery | Hide/Show, Toggle and Fading methods with Examples
- How to create slide left and right toggle effect using jQuery?
- How to replace dropdown-toggle icon with another default icon in Bootstrap ?
- How to Create Toggle Switch by using HTML and CSS ?
- Data-toggle attributes in Twitter Bootstrap
- How to create a radio button similar to toggle button using Bootstrap ?
- How to get button toggle state within HTML?
- How to toggle class using AngularJS ?
- 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