How to hide a div in JavaScript on button click?

JavascriptWeb DevelopmentObject Oriented Programming

Let’s say the following is our div −

<div id="showOrHide">
Welcome in JavaScript
</div>

Following is our button. On clicking, the above div should hide −

<button onclick="showOrHideDiv()">Click The Button</button>

Use the style.display concept in JavaScript to hide div. Following is the code −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button onclick="showOrHideDiv()">Click The Button</button>
<div id="showOrHide">
Welcome in JavaScript
</div>
<script>
   function showOrHideDiv() {
      var v = document.getElementById("showOrHide");
      if (v.style.display === "none") {
         v.style.display = "block";
      } else {
         v.style.display = "none";
      }
   }
</script>
</body>
</html>

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output −

When the user clicks on the button, the div hides. The screenshot is as follows −

raja
Published on 01-Sep-2020 12:15:53
Advertisements