How to use jQuery Toggle Method - .toggle()

How to use jQuery Toggle Method – .toggle()

How to use jQuery Toggle Method – .toggle()

The jQuery Toggle method (.toggle())will toggle between hide() and show() for the selected elements. This means if an element is hidden then .toggle() will show it, similarly if the element is showing then .toggle will hide it.

.toggle() Syntax

$(selector).toggle(speed,easing,callback)
Parameter Description
speed Optional value.
Specifies the speed of the toggle effect.
It can be:

  • milliseconds – .toggle(1000)
  • “slow” – .toggle(“slow”)
  • “fast” – .toggle(“fast”)
easing Optional value.
Specifies the type of speed of the element during the toggling. Default value is “swing”.
It can be:

  • “swing” – beginning slow, faster in the middle & slow at the end.
  • “linear” – constant speed
callback Optional. A function to be executed after the toggle method is completed.

Example 1: Toggle a div

The following code toggles a div element with id div1.

$("#div1").toggle();

Example 2: Toggle a div with speed

The code below toggles the div in 2 seconds.

$("#div1").toggle(2000);

Example 3: Toggle a div with speed & easing

Here I have passed the speed and easily parameters to the jQuery Toggle method.

$("#div1").toggle("slow", "linear");

Example 4: Toggle with callback function

In this code I have also passed a callback function that will show the alert message whenever the toggling is finished.

$("#div").toggle("slow", "linear", function () {
    alert("Toggling is finished!");
});

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.