Post
Ask Question

Hide and Show DIV using JavaScript

Introduction

Open Visual Studio and create new project and select Web template from the list and select ASP.NET Empty Web Application. Enter the name of your application and click on OK.

Right click on the project and select Add -> Web Form and name it as Home.aspx.

Now paste the below JavaScript code in the head section of the Home.aspx page.

JavaScript
  1. <script>  
  2.     function showhide()
  3.     {  
  4.          var div = document.getElementById("newpost");  
  5.          if (div.style.display !== "none") 
  6.          {  
  7.              div.style.display = "none";  
  8.          }  
  9.          else
  10.          {  
  11.              div.style.display = "block";  
  12.          }  
  13.     }  
  14. </script>  

Home.aspc Page Code

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="ShowHideDiv.Home" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Show/Hide div</title>  
  8.     <script>  
  9.         function showhide() 
  10.         {  
  11.             var div = document.getElementById("newpost");  
  12.             if (div.style.display !== "none") {  
  13.                 div.style.display = "none";  
  14.             }  
  15.             else {  
  16.                 div.style.display = "block";  
  17.             }  
  18.         }  
  19.     </script>  
  20. </head>  
  21. <body>  
  22.     <div id="newpost">  
  23.         <p> JavaScript is the programming language of HTML and the Web. <br />  
  24.             Programming makes computers do what you want them to do. <br />  
  25.             JavaScript is easy to learn.  </p>  
  26.     </div>  
  27.     <button id="button" onclick="showhide()">Show/Hide</button>  
  28. </body>  
  29. </html>  

Output

output 
Next Recommended Reading Print Div Content from a page using Javascript