In this article we will show you the solution of toggle class jQuery, here we are going to show you example with toggle class by using toggleClass() method.
The toggleClass() method toggles between adding and removing one or more class names from selected elements. This method checks each element for the specified class names. The class names are added when missing and removed if already set with toggle effect.
Step By Step Guide On Toggle Class jQuery :-
Here we defined html block with heading tag, paragraph element to show toggleclass effect of applied style.
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 you need to specify selector name.
Then you have to append toggleClass() method with applying class name to toggle that class with some styles.
<!DOCTYPE html>
<html>
<head>
<title>Toggle Class</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").toggleClass("res");
});
</script>
</head>
<body>
<style>
.res{
font-size: 50px;
font-style: italic;
}
</style>
<h2>Toggling Class</h2>
<p>This is paragraph line</p>
</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() function where we selector ‘p’ you can prefer some other elements also in html if you want any other, confirm whether defined selector you given.
- Then you need to append toggleClass() method with the selector and within method you have specify ‘res’ which class need to toggle.
- In style tag we adding two properties ‘font-size, font-style’ with respected values ‘50px, italic’ to highlight for user clarification.
- In html block we defined h2 tag with text ‘Toggling Class’ and paragraph element, here you can modify both tag with wanted text as per your thought.
- 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 use toggle class in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes in document without any error.
When we executes this program on browser we can see heading ‘Toggling Class’ and paragraph element with specified style applied on it.
I hope this article on toggle class jQuery helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
