Updated April 10, 2023
Definition of jQuery click toggle
The jQuery click toggle is performed to toggles the two or more functions executes on every click. We can perform the click toggle with the help of the toggle() function. The jQuery toggle() function is a built-in function in jQuery. The first listed function is fired whenever a selected element is clicked, the second listed function is fired when clicked again, and so on. So this way we can perform some different actions every time the selected element is clicked.
The syntax of the jQuery toggle() function:
$(selector).toggle(fun1, fun2, fun3, … funn);Parameters:
fun1, fun2, fun3, … funn – This is an optional parameter. It specifies the attach functions which are to be executed whenever the click event occurs.
Return value –
The function does not return any value.
Working of the jQuery click toggle
The jQuery toggle() function accepts one or more functions as parameters that are the name of the function to run whenever a click event occurs and it is optional. Suppose we have a div element in the HTML page that has some content. We need to perform the click toggle action on the div element on click, so we can use the toggle() function as “$(“div”).toggle(function(){$(this).css({ “color” : “red”});}, function(){$(this).css({ “color” : “green”});} );”. Now when we click any div element in the page the click event gets generate and change the font color of the div element content and on next click change the font colour to the green colour and so on.
Examples for the jQuery click toggle
Example of jQuery click toggle to toggle two or more function calls on every click of the button.
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
<title> This is an example for jQuery click toggle function </title>
</head>
<script>
$( document ).ready( function( ) {
$( "button" ).toggle(
function(){ $( "button" ).css( {"background-color" : "red"} ); },
function(){ $( "button" ).css( {"background-color" : "blue"} ); },
function(){ $( "button" ).css( {"background-color" : "green"} ); });
});
</script>
</head>
<body>
<h3> This an example of click toggle : </h3>
<p> Click the below button, on every click change the background color of the button. </p>
<button style = "background-color : yellow;" > Click to generate click event. </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
Once we click again on the button, the output is –
Once again when we click on the button, the output is –
In the above code, the “button” element is created and on click it calls to the toggle() function and on every click on it, the function change the background colour of the button by using the code as “$( “button” ).toggle(function(){ $( “button” ).css( {“background-color” : “red”} ); }, function(){ $( “button” ).css( {“background-color” : “blue”} ); }); ”, as we can see in the above output.
Example of jQuery click toggle to toggle show or hide the contents of the p element –
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
<title> This is an example for jQuery click toggle function </title>
<style>
p {
display : block;
width : 310px;
padding : 15px;
font-size : 30px;
border : 2px solid green;
}
</style>
<script>
$(document).ready(function() {
$( "button" ).click( function(){
$( "p" ).toggle();
});
});
</script>
</head>
<body>
<h3> This an example of click() function: </h3>
<p> This is a paragraph and it will hide and show on click of the below button. </p>
<button> Toggle the p element content between hide() and show() </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
Once we click again on the button, the output is –
In the above code, the “button” element is created and on the click, it calls to the toggle() function. Every click on the button, the toggle() function hide and show the “p” element contents by using the code as “$( “p” ).toggle();”, as we can see in the above output.
Example of jQuery click toggle to toggle the functions on multiple elements –
Example #3
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
<title> This is an example for jQuery click toggle function </title>
<style>
p {
display : block;
width : 310px;
padding : 15px;
font-size : 30px;
border : 2px solid green;
color : blue;
}
h3 {
display : block;
width : 310px;
padding : 15px;
font-size : 30px;
border : 2px solid green;
color : green;
}
span {
display : block;
width : 310px;
padding : 15px;
font-size : 30px;
border : 2px solid green;
color : yellow;
}
</style>
<script>
$(document).ready(function() {
$( "h3, p, span" ).toggle(
function(){$(this).css({ "color" : "red", "border" : "2px solid black" });},
function(){$(this).css({ "color" : "green", "border" : "2px dash red" });
});
});
</script>
</head>
<body>
<h2> This an example of click toggle : </h2>
<h3> This is a heading to fade out. </h3>
<p> This is a paragraph to fade out. </p>
<span> This is a span box to fade out. </span>
</body>
</html>An output of the above code is –
Once we click on the heading, the output is –
Once we click on the paragraph, the output is –
Once we click on the span, the output is –
In the above code, there are “h2”, “h3”, “p”, and “span” elements are used. Next, the toggle() function is used to change the font and border color. So when the “h3” or “p” or “span” element content clicked the click event gets generate and the respective element contents elements font style gets change and applied in sequence by the list of functions.
Conclusion
The jQuery click toggle can be performed by using the toggle function, toggle() function is a built-in function in jQuery, which is used to toggles the two or more function execution on every click.
Recommended Articles
This is a guide to jQuery click toggle. Here we discuss the Introduction, syntax, examples with code implementation. You may also have a look at the following articles to learn more –
