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.

Today I am going to demonstrate here, how can we hide or show 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.

Social Link

Swapnil Raja

Swapnil Raja is a technophile. He writes on scripting language, designing software, web technology, CMS and other technology related stuff. He is aregular contributor on html5andcss3.org. Want to know more about him ? feel free to get in touch with him on different social platform.
Social Link

Latest posts by Swapnil Raja (see all)

Author: Swapnil Raja

Swapnil Raja is a technophile. He writes on scripting language, designing software, web technology, CMS and other technology related stuff. He is a regular contributor on html5andcss3.org. Want to know more about him ? feel free to get in touch with him on different social platform.