Show and hide Div with Javascript

Many times it has been seen that, we are in search of creating the dynamic content, which is visible on certain button click or checkbox selection. If we search on the internet we can find too many solutions to resolving this issue. Please go through this article to have solid understanding about show and hide div.

You do not need much skills to reach this goal. You should be familiar with only HTML, CSS and Javascript to achieve this goal.

We have demonstrated below a short an simple example, which will be beneficial for the beginners of same kind of individuals. In the below tutorial you will find the process to show and hide div with pure Javascript.

Here is step by step procedure:

1) Create a HTML file for browser view and save it as index.html

<!doctype html>
<html>
 <head>
  <title>Show and hide div with JavaScript</title>
  <script src="show.js"></script>
 </head>
 <body>
<div id="newpost">

This div will be show and hide on button click</div>
<button id="button" onclick="showhide()">Click Me</button>
</body>
</html>

Download


2) Create a JavaScript file for show and hide Div and save it with show.js

     function showhide()
     {
           var div = document.getElementById("newpost");
    if (div.style.display !== "none") {
        div.style.display = "none";
    }
    else {
        div.style.display = "block";
    }
     }

Download


Thats all done, now you can show and hide your div on button click.

If you get it clearly it’s ok or if you have any issue feel free to get in touch by commenting below. Thanks for visiting and reading this tutorial.