Hide and Show DIV using JavaScript

Introduction

 
Open Visual Studio and create a new project and select the 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