Computer >> Computer tutorials >  >> Programming >> Javascript

How to hide HTML element with JavaScript?


Use the visibility property in JavaScript to hide an element. You can try to run the following code to learn how to work with visibility property to hide an element −

Example

<!DOCTYPE html>
<html>
   <body>
      <p id = "pid">Demo Text</p>

      <button type = "button" onclick = "displayHide()">Hide</button>
      <button type = "button" onclick = "displayShow()">Show</button>
     
      <script>
         function displayHide() {
            document.getElementById("pid").style.visibility = "hidden";
         }
         function displayShow() {
            document.getElementById("pid").style.visibility = "visible";
         }
      </script>
   </body>
</html>