How to set whether an element should be visible in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we shall learn to set whether an element should be visible in JavaScript. Use the visibility property to hide or show an element. The visibility property takes different values such as visible, hidden, collapse, etc. To show an element, we set the visibility property to "visible" whereas to hide the element we set it to "hide". We can also set visibility using the display property.

Let us briefly discuss the two properties in JavaScript to achieve our objective.

Using the Style visibility Property

JavaScript provides us with the visibility property with which we can set whether an element should be visible.

The visibility property sets or returns whether an element has to be visible or not. Visibility makes the content invisible, But the content does not leave its position or size.

Syntax

Following is the syntax to set whether an element should be visible using the visibility property in JavaScript −

object.style.visibility = value; 
or 
object.style["visibility"] = value; 
or 
object.style.setProperty("visibility", value);

With any one of these syntaxes, we can set whether an element should be visible or not.

Visibility Values

Following are the style, we can set for the visibility property −

visible − The element is visible.
hidden − The element is invisible but still exists.
collapse − Works like hidden when used on a table row or cell.
initial − Sets this property to its default value.
inherit − Inherits this property from its parent element.

The default value of this property is visible. The return value is a string representing whether the content of an element is visible or not.

Example 1

You can try to run the following code to learn how to work with visibility property.


<!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>

Example 2

In this program, we are setting the visibility of an element. The user selects the required visibility value from the drop-down.

When the user ticks on the button, we call the function to set the element's visibility following the syntax given above.

If the user selects inherit, the visibility value of the parent element is set to our element.


<html> 
<head> 
   <style> 
      #visibleEleUsrEl{ 
         background-color: #F5F5DC; 
         text-align: center 
      } 
   </style> 
</head> 
<body> 
   <h3>Set the visibility of an element using <i>the visibility property.</i> 
   </h3> 
   <div id = "visibleEleUsrParent">     
      <div id = "visibleEleUsrEl"> Set Visibility </div> 
   </div> 
   <br> 
   <br> 
   <div id = "visibleEleUsrBtnWrap"> 
      <select id = "visibleEleUsrSel"> 
         <option selected = "selected"> visible </option> 
         <option> hidden </option> 
         <option> collapse </option> 
         <option> initial </option> 
         <option> inherit </option> 
      </select> 
      <br>    
      <p>Select visibility and click on the button.</p> 
      <button onclick = "setVisibility();"> Apply </button> 
   </div> 
   <br>     
</body>   
   <script> 
      function setVisibility(){ 
         var visibleEleUsrSelTag = document.getElementById("visibleEleUsrSel"); 
         var visibleEleUsrSelIndx = visibleEleUsrSelTag.selectedIndex; 
         var visibleEleUsrSelStat = visibleEleUsrSelTag.options[visibleEleUsrSelIndx].text;      
         var visibleEleUsrEl = document.getElementById("visibleEleUsrEl"); 
         visibleEleUsrEl.style.visibility = visibleEleUsrSelStat; 
         visibleEleUsrEl.innerHTML = "Visibility =  <b>"  
         + visibleEleUsrEl.style["visibility"] + "</b>";          
      } 
   </script> 
</html>

Using the Style display Property

With this property, we can set or return an element's display type. If the display is set to none, the entire element gets invisible without taking any space.

Syntax

Following is the syntax to set whether an element should be visible using the display property in JavaScript −

object.style.display = value; 
or 
object.style["display"] = value; 
or 
object.style.setProperty("display", value);

We can set an element's display with any of these syntaxes.

display values

block − The element is rendered as a block-level element. That means it does not allow any display on its left or right sides.
none − The element is not displayed.

Example

In this program, we are setting the visibility of an element with a display property. The user selects the required display value from the drop-down.

When the user ticks on the button, we call the function to set the element's display following the syntax given above.


<html> 
<head> 
   <style> 
      #displayEleUsrEl{ 
         background-color: #BA55D3; 
         text-align: center 
      } 
   </style> 
</head> 
<body> 
   <h3>Set the visibility of an element using <i>the display property.</i>
   </h3> 
   <div id = "displayEleUsrParent">     
      <div id = "displayEleUsrEl"> Set Display </div> 
   </div> 
   <br> 
   <br> 
   <div id = "displayEleUsrBtnWrap"> 
      <select id = "displayEleUsrSel"> 
         <option selected = "selected"/> block 
         <option/> none 
      </select> 
      <br>    
      <p>Select a display and click on the button.</p> 
      <button onclick = "setDisplay();"> Apply </button> 
   </div> 
   <br>     
</body>   
   <script> 
      function setDisplay(){ 
         var displayEleUsrSelTag = document.getElementById("displayEleUsrSel"); 
         var displayEleUsrSelIndx = displayEleUsrSelTag.selectedIndex; 
         var displayEleUsrSelStat = displayEleUsrSelTag.options[displayEleUsrSelIndx].text;      
         var displayEleUsrEl = document.getElementById("displayEleUsrEl"); 
         displayEleUsrEl.style.display = displayEleUsrSelStat; 
         displayEleUsrEl.innerHTML = "Display =  <b>" +  
         displayEleUsrEl.style["display"] + "</b>";          
      } 
   </script> 
</html>

In this tutorial, we went through the two properties to set the visibility of an element in JavaScript. The visibility property and the display property show the element similarly. But the visibility property hides the element by leaving its space and size as it was. At the same time, the display property hides the element completely without leaving any space. Users can choose any method based on the requirements.