How to hide HTML element with JavaScript?

Javascript Object Oriented Programming Front End Technology

In this tutorial, we will learn how to hide HTML element with JavaScript.

Hiding an HTML element can be performed in different ways in JavaScript. In this tutorial, we will see the three most popular ways of doing it −

Using the hidden property
Using the style.display property
Using the style.visibility property

Generally, we use the hidden attribute to hide a particular element. We can toggle between hiding and showing the element by setting the hidden attribute value to true or false, respectively.

In the other two ways, we use the style object of the element. We have two properties in the style object to hide the HTML element, one is the display, and another one is the visibility.

In JavaScript, we can use both of these properties to hide the HTML elements, but the main difference between these two is when we use style.visibility property, then the specific tag is not visible, but the space of the tag is still allocated. Whereas in style.display property, not only is the tag hidden but also there is no space allocated to that element.

Using the hidden property

In JavaScript, the hidden property of an element is used to hide an element. We set the hidden properties value to true to hide the element.

Syntax

Following is the syntax to use hidden property −

document.getElementById('element').hidden = true

In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method, we are accessing the element and changing its hidden property to true to hide the element.

Example

In the below example, we have used the hidden property to hide a div element using JavaScript.


<html>
<body>
   <div id="dip"> Click the below buttons to hide or show this text. 
   </div><br>
   <button onclick="hide()"> Hide Element </button>
   <button onclick="show()"> Show Element </button>
   <script>
      function hide() {
         document.getElementById('dip').hidden = true
      }
      function show() {
         document.getElementById('dip').hidden = false
      }
   </script>
</body>
</html>

Using the style.display property

In JavaScript, style.display property is also used to hide the HTML element. It can have values like ‘block,’ ‘inline,’ ‘inline-block,’ etc., but the value used to hide an element is ‘none.’ Using JavaScript, we set the style.display property value to ‘none’ to hide html element.

Syntax

Following is the syntax to hide HTML elements using style.display property in JavaScript.

document.getElementById('element').style.display = 'none'

In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method, we are accessing the element and changing its style.display property to ‘none’ to hide the element.

Example

In the below example, we have used the style.display property to hide a div element using JavaScript.


<html>
<style> 
   #myDIV {
      width: 630px;
      height: 300px;
      background-color: #F3F3F3;
   }
</style>
<body>
   <p> Click the "Hide Element" button to hide the div element. </p>
   <button onclick="hide()"> Hide Element </button>
   <div id="myDIV"> Hello World! This is DIV element </div>
   <script>
      function hide() {
         document.getElementById('myDIV').style.display = 'none'
      }
   </script>
</body>
</html>

Using the style.visibility property

In JavaScript, style.visibility property is also used to hide the HTML element. It can have values like ‘visible,’ ‘collapse,’ ‘hidden’, ‘initial’ etc., but the value used to hide an element is ‘hidden’. Using JavaScript, we set the style.visibility property value to ‘hidden’ to hide html element.

Syntax

Following is the syntax to hide HTML elements using style.visibility property in JavaScript −

document.getElementById('element').style.visibility = 'hidden'

In the above syntax, ‘element’ is the id of an HTML element, and by using document.getElementById method, we are accessing the element and changing its style.visibility property to ‘hidden’ to hide the element.

Example

In the below example, we have used the style.visibility property to hide element using JavaScript.


<html>
<style> 
   #dip {
      width: 630px;
      height: 300px;
      background-color: #F3F3F3;
   }
</style>
<body>
   <p> Click the "Hide Element" button to hide the div element. </p>
   <button onclick="hide()"> Hide Element </button>
   <button onclick="show()"> Show Element </button>
   <div id="dip"> Hello World! This is DIV element </div>
   <script>
      function hide() {
         document.getElementById('dip').style.visibility = 'hidden';
      }
      function show() {
         document.getElementById('dip').style.visibility = 'visible';
      }
   </script>
</body>
</html>

In the above output, users can see the element is hidden using style.visibility property, but the element still occupies its space in the browser.

In this tutorial, we learned three ways to hide an element using JavaScript. The first approach was to use the hidden property of an element. The next was to set style.display property to ‘hidden’. The third method was to set style.visibility property to ‘hidden’.