JavaScript Show/Hide DIV Onclick
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of JavaScript show/hide div onclick, many times we see on webpage that sometimes there is a button on webpage and on the click of that button an action happens.
Hence, today we will learn about how to hide and show div on click with help of JavaScript.
Step By Step Guide On JavaScript Show/Hide DIV Onclick :-
As, here below we are going to create dummy paragraph and on the click of button it will hide and show.
There is also a property of toggle that we can directly apply, but in this article we done our codes manually.
In next article we will show you this same article done with the help of toggle. Now, here is the code below let us understand the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Show/Hide div using JavaScript</title>
<script>
function showhide()
{
var div = document.getElementById("dummy_pg");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>
</head>
<body>
<div id="dummy_pg">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab ea suscipit nobis est laborum omnis temporibus error voluptas tenetur deserunt nemo, nisi quisquam assumenda veniam ducimus? Omnis ut incidunt, atque modi earum eaque error, consequuntur voluptatum dignissimos voluptates vitae est nisi, consequatur magni unde autem ipsam harum sint magnam odio. </p>
</div>
<button id="button" onclick="showhide()">Show/Hide button</button>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Now, here before closing head, we write our script, you can use this or write this before closing body also.
- Now, in body we create a paragraph and a button with some id. And apply on click function on button.
- Now, let us understand the JavaScript. In script we create a function, which active on button click. Then the value of paragraph stored into a variable, then we use if statement.
- In if statement we write here if on load the paragraph shows then on button click it must hide. If on load it is hidden then on button click it shows.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we able to show and hide a div on click with the help of JavaScript.
I hope this tutorial on JavaScript show/hide div onclick helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
