jQuery Effect - Toggle
 |
| jQuery Effect jQuery Tutorial CodingTuting |
Toggle means "Switching".
jQuery Toggle effect is one of the most useful effects.
Toggle effect is used to switching between Hide and Show effects. Like On-Off switch. Here we will see jquery toggle for hide and show.
In other words, we can understand that - jquery toggle works with visibility. Whenever we want to modify the visibility (visibility true or visibility false), we should use the jquery toggle visibility.
In this jquery tutorial we'll see how jquery toggle works?
Syntax:
$(selector).toggle(speed, callback);
Both Hide() and Show() methods have two optional parameters.
1. The parameter "speed" is used to change the default speed of Hiding and Showing. The value of the "speed" parameter can be: "slow", "fast", or in milliseconds.
2. The parameter "callback" is a function, which executes after the Hide/Show method completed. We'll learn about callback in the upcoming chapter.
Example:
This will Hide and Show the element <p>
<button class="hide-show-btn">Text Hide Show</button>
<p> This is an example text. Click on the above button to Hide and Show this text. </p>
$(document).ready(function(){
$(".hide-show-btn").click(function(){
$("p").toggle();
});
});
Output
This is an example text. Click on the above button to Hide and Show this text.
You may like more in jQuery
jQuery toggle effect is also used for toggle the 'class'. Any kind of task like 'switching' can be done by using the jquery toggle effect.
Let's see How to use jquery toggle class
jQuery toggle class
Click on the above button to add class "bgParaChange" for change the background color.
Here is the Code and method of above jQuery toggle class example.
For toggle class in jquery -
Step 1 - We'll create a class - name "bgParaChange", and give it style for change the background color.
<style>
.bgParaChange
{
background-color:dimgray;
}
</style>
Step 2 - Create a button and give it a class or id for selecting it. And create a paragraph in HTML and give it a class or id for selecting it.
<button class="btntoggleClass">Toggle Class</button>
<p class="bgPara"> Click on the above button to add class "bgParaChange" for change the background color. </p>
Step 3 - Create a jquery function, which will occur on click button. This function will toggle the class "bgParaChange" on specific element where we want.
$(document).ready(function(){
$(".btntoggleClass").click(function(){
$(".bgPara").toggleClass("bgParaChange");
});
});
This is the simple example of jquery toggle visibility
We hope you understand that how jquery toggle works and how to toggle jquery. Hope you like this short tutorial with example of how to use jquery toggle and jquery toggle class. This is one of the very useful effect of jQuery.
Stay connected with the site CodingTuting for more interesting topics with example.
We would like your suggestion about any topic or solution.
This same toggle effect use in jquery slide toggle. click here to see how to use jquery slide toggle.
Thanks for Reading
EmoticonEmoticon