In this tutorial we will show you the solution of toggle class JavaScript, here we using toggle() method for toggling particular class when user clicks toggle button displayed on webpage.
As we know toggling means something will have to appear when user clicks on html element in webpage.
For access toggle class we need to use classlist object in javascript with toggle() method within this we have give class name needs to toggle.
Step By Step Guide On Toggle Class JavaScript :-
Here we defined h3 tag for display heading for concept, button ‘Toggle’ created with onclick event so it call function myfun() when user click on it and div tag with id ‘res’ defined with some text then it is for add the toggle class styles.
In script we defined function myfun(), here we collecting div element ‘res’ and stored value to ‘ele’ variable.
Finally we appending classlist object with toggle() method for adding class ‘style’ block of styles when user clicks on toggle button.
<!DOCTYPE html>
<html>
<head>
<title>Toggle Class</title>
<style>
.style{
padding: 10px;
background-color: rgb(68, 204, 140);
width: fit-content;
}
</style>
</head>
<body>
<h3>Toggle Class</h3>
<button onclick="myfun()">Toggle</button>
<div id="res">Click Toggle Button</div>
<script>
function myfun(){
var ele=document.getElementById('res');
ele.classList.toggle("style");
}
</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 contains 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 html we defined h3 tag with contents, button ‘Toggle’ defined with onclick event to initialize myfun() function call when user clicks on it then <div> tag created with ID ‘res’ for appends classlist object, toggle() method.
- In <script> we defined myfun() function, here we defined variable ‘ele’ for refers div element defined in html block. Using variable ‘ele’ we appending some class styles on div element ‘res’.
- For make toggle class we appending classlist object, toggle method with class ‘style’. So when user clicks ‘Toggle’ button for class ‘style’ defined styles appended on div element ‘res’.
- That’s way it is changed to padding ‘10px at four sides and background color changed to green’.
- 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 replace character in string using javascript.
When we executing this program on browser we can see Toggle button present with heading ‘Toggle Class’.
When user clicks on it loads myfun() function so div element with content ‘Click Toggle Button’ will get modified with padding and background color change.
This is result of toggling class ‘style’ on div element when user clicks ‘Toggle’ button.
I hope this tutorial on toggle class JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
