Style visibility property

Definition and Usage

visibility The property sets or returns whether the element should be visible.

visibility The property allows the author to display or hide elements.

This property is similar to display property. But the difference is that if you set display:none, it will hide the entire element, and visibility:hidden It means that the content of the element will be invisible, but the element will maintain its original position and size.

See also:

CSS Tutorial:CSS Display and visibility

CSS Reference Manual:Visibility property

Example

Example 1

Hide the content of the <p> element:

document.getElementById("myP").style.visibility = "hidden";

Try It Yourself

More examples are provided below the page.

Syntax

Return the visibility property:

object.style.visibility

Set the visibility property:

object.style.visibility = "visible|hidden|collapse|initial|inherit"

Property value

Value Description
visible The element is visible. Default.
hidden The element is not visible, but still affects layout.
collapse When used on table rows or cells, the element is not visible (the same as "hidden").
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical details

Default value: visible
Return value: A string indicating whether the element is displayed.
CSS version: CSS2

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

More examples

Example 2

Difference between display and visibility properties:

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

Try It Yourself

Example 3

Toggle between hiding and showing elements:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.visibility === 'hidden') {
    x.style.visibility = 'visible';
  } else {
    x.style.visibility = 'hidden';
  }
}

Try It Yourself

Example 4

Hide and show <img> elements:

function hideElem() {
  document.getElementById("myImg").style.visibility = "hidden"; 
}
function showElem() {
  document.getElementById("myImg").style.visibility = "visible"; 
}

Try It Yourself

Example 5

Return the visibility type of the <p> element:

alert(document.getElementById("myP").style.visibility);

Try It Yourself