Last Updated : Jan 1, 2023
We defined toggle between show and hide state of class when onclick event triggered.
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> 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.