JavaScript Toggle Class Onclick
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this tutorial we will show you the solution of JavaScript toggle class onclick, here we are created class which contains some styles when we clicks on onclick event defined element that block of styles class needs to become show state otherwise it will becomes hide state.
We defined toggle between show and hide state of class when onclick event triggered.
Step By Step Guide On JavaScript Toggle Class Onclick :-
Here we defined button and div elements. The button ‘Toggle’ have onclick event with value ‘myFun()’ which is triggers function call when user clicks on it and div element have id attribute ‘divele’ by using this we can access div element in script block and some text.
In script function myFun() defined, there we referring div element by using id ‘divele’ and stored on variable ‘b’ and then using toggle() method and property ‘classList’ we toggling class ‘b’ to div element.
<!DOCTYPE html>
<html>
<head>
<title>TOGGLE CLASS ONCLICK</title>
</head>
<body>
<style>
.b{
padding: 2rem;
border: 5px solid rgb(18, 220, 89);
width: max-content;
}
</style>
<button onclick="myFun()">Toggle</button>
<div id="divele">You can hide/show this box using javascript</div><br>
<script>
function myFun(){
var b=document.getElementById("divele");
b.classList.toggle("b");
}
</script>
</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.
- 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 style block we created class ‘b’ and defined some block of style i.e, padding to ‘2 rem’, border have 5px solid width with green color shade, width sets to ‘max-content’.
- Here we defined button and div elements with must needed attributes ‘onclick, id’ with respective values ‘myFun(), divele’.
- In script we defined function myFun(), here we collecting div element by id ‘divele’ using getElementById() method for div element and stored on variable ‘b’.
- When we appending ‘classList.Toggle()’ with variable ‘b’ which says added toggle method on div element and in Toggle(‘b’) refers class ‘b’ defined at style block so it will adding class b to div element when user clicks on Toggle button.
- 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 toggle a class by onclick using javascript.
When we executes program on browser we can see our defined button ‘Toggle’ and Text ‘You can hide/show this box using javascript’ user needs to clicks on button then class ‘b’ styles added on div element. If you’re wish to change specified class styles with some other style of properties and values then you can modify it accordingly.
I hope this tutorial on JavaScript toggle class onclick helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
