Post
Ask Question

Hide and Show DIV using JavaScript

Introduction

Open Visual Studio, create a new project, 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, select Add -> Web Form, and name it Home.aspx.

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

JavaScript

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

Home.aspc Page Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="ShowHideDiv.Home" %>  
  
<!DOCTYPE html>  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Show/Hide div</title>  
    <script>  
        function showhide() 
        {  
            var div = document.getElementById("newpost");  
            if (div.style.display !== "none") {  
                div.style.display = "none";  
            }  
            else {  
                div.style.display = "block";  
            }  
        }  
    </script>  
</head>  
<body>  
    <div id="newpost">  
        <p> JavaScript is the programming language of HTML and the Web. <br />  
            Programming makes computers do what you want them to do. <br />  
            JavaScript is easy to learn.  </p>  
    </div>  
    <button id="button" onclick="showhide()">Show/Hide</button>  
</body>  
</html>  

Output

output