Hide And Show DIV Using JavaScript With Example
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of hide and show div using JavaScript with example, here we defined two buttons for proceed hide and show of particular div defined in html page by onclick event.
The onclick event occurs when the user clicks on an element and we can add this event on any html elements.
This event lets you as a programmer execute a function when an element is clicked.
Step By Step Guide On Hide And Show DIV Using JavaScript With Example :-
Here we defined h2 tag for instruct users then two buttons ‘HIDE,SHOW’ for process hide and show action then finally defined div with attributes ‘id,class’.
In style we defined div size by width and height to ‘30%,50%’ respectively, with some background color.
When user click HIDE button it will hide the div by using javascript with style value to ‘none’ and incase they click SHOW button then it will shows the hidden div.
<!DOCTYPE html>
<html>
<head>
<title>HIDE/SHOW DIV IN JS</title>
</head>
<style>
.show{
position: absolute;
width:30%;
height: 50%;
background-color: #ccc;
border: 1px solid #ccc;
}
</style>
<body>
<h2>CLICK HIDE DIV WILL BECOME HIDDEN / CLICK SHOW DIV WILL BECOME VISIBLE</h2>
<button onclick="hide()">HIDE</button><button onclick="show()">SHOW</button>
<div class="show" id="divhide"></div>
<script>
function hide(){
document.getElementById('divhide').style.display='none';
}
function show(){
document.getElementById('divhide').style.display='block';
}
</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.
- In style tag we defined style for div tag, here we sets div position to absolute, width and height to ‘30%,50%’, then border, background color sets to ‘#555’.
- 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.
- Here we defined h2 tag for instruct users, two buttons ‘HIDE, SHOW’ defined with onclick event for initialize function call hide(), show() when user click on it.
- In script we defined functions hide(), show(), when user clicks HIDE there we sets display to ‘none’ so div turns to hidden state, same as when user clicks SHOW there we sets display to ‘block’ so div become visible state.
- 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 hide or show particular div using javascript.
When we executes our program on browser we can see two buttons ‘HIDE, SHOW’ and div of square shape block with grey background color.
When user clicks HIDE button that square background gone to hidden state, incase user clicks SHOW button that hidden div comes to visible state.
We can also create div element with different requirements that will depends on our own thoughts.
I hope this tutorial on hide and show div using JavaScript with example helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
