Toggle in jQuery simply refers to a built-in method that can be applied to any element on a page; it is used to hide or show that particular element. The button that is used to
toggle moves over the text to hide it.
Once clicked again, the button goes back to its original position and reveals the text.
toggle method has the syntax as shown below:
speed: This can either be given in milliseconds or in the textual input as “slow” or “fast”. The speed determines the rate at which the
toggle will hide or show the text.
easing: This has two possible input values,“swing” or “linear”, with the former being the default value. This value determines whether the entire
toggle will run at the same pace (i.e. linearly) or if it will increase speed in the middle (i.e. swinging).
callback: This is simply a method that can be called to execute once the
toggle method has run.
Note: All three of these parameters are optional.
Now that we know how the method works, let’s look at different implementations of the method below!
The example below shows how to simply use the
The example below shows how to add a delay to the
toggle method. In this example, we have added a delay of 2 seconds
The example below shows how to use the
delay functionality, using built-in textual values, instead of giving it a time-limit
The example below shows how to change the
easing property of the
toggle method to
linear, and how to add a time-delay of a few seconds.
The example below shows how a
callback method can be implemented in the
toggle method upon its execution