In this article we will show you the solution of jQuery toggle class onclick, here we needs to use toggleClass() and click() methods. The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
The click() method simulates a mouse-click on an element. This method can be used to execute a click on an element as if the user manually clicked on it.
Step By Step Guide On jQuery Toggle Class Onclick :-
Here we defined two h1 tags with class attribute which tag is for shows toggle class and button ‘Toggle’.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser and within that we waiting for click event occurrence which is appended with button tag then there we referring h1 tag then which is appends with toggleClass() method with two class names ‘tc, c’ are argument.
<!DOCTYPE html>
<html>
<head>
<title>Toggle Class Onclick</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
$('h1').toggleClass('tc c');
})
})
</script>
</head>
<body>
<style>
.tc{
color: red;
font-weight: 200;
}
.c{
color: blue;
}
</style>
<h1 class="c">This is heading tag</h1>
<h1 class="tc">This is heading tag</h1>
<button>Toggle</button>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined ready() method within that we appending click() method with button element by using tag name ‘button’ for generate click event when user clicks on it.
- Within function we needs to append ‘toggleClass()’ method with class names ‘tc, c’ as arguments with h1 tag. The toggleClass() method adds ‘tc’ class on first tag and removes ‘c’ class from that tag and vice versa happen on second tag.
- In html block we defined two heading h1 elements with string ‘This is heading tag’ then each have tc, c classes respectively and at last button ‘Toggle’.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to toggle class after onclick event occurrence in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see button ‘Toggle’ and two h1 tag lines 'This is heading tag’ with each different classes ‘tc, c’ style, now user needs to click on button we can see toggling two classes on each other elements.
I hope this article on jQuery toggle class onclick helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
