Style visibility Property
Example
Hide the content of a <p> element:
document.getElementById("myP").style.visibility = "hidden";Try it Yourself »
Definition and Usage
The visibility property sets or returns whether an element should be visible.
The visibility property allows the author to show or hide an element. It is
similar to the display property. However, the difference is that if you set display:none, it hides
the entire element, while visibility:hidden means that the contents of the
element will be invisible, but the element stays in its original position and
size.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| visibility | Yes | Yes | Yes | Yes | Yes |
Syntax
Return the visibility property:
object.style.visibility
Set the visibility property:
object.style.visibility = "visible|hidden|collapse|initial|inherit"
Property Values
| Value | Description |
|---|---|
| visible | The element is visible. This is default |
| hidden | The element is not visible, but still affects layout |
| collapse | When used on a table row or cell, the element is not visible (same as "hidden") |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | visible |
|---|---|
| Return Value: | A String, representing whether the content of an element is displayed or not |
| CSS Version | CSS2 |
More Examples
Example
Difference between the display property and the visibility property:
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}
Try it Yourself »
Example
Toggle between hiding and showing an element:
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
Hide and show an <img> element:
function hideElem() {
document.getElementById("myImg").style.visibility = "hidden";
}
function showElem() {
document.getElementById("myImg").style.visibility = "visible";
}
Try it Yourself »
Example
Return the visibility type of a <p> element:
alert(document.getElementById("myP").style.visibility);
Try it Yourself »
Related Pages
CSS tutorial: CSS Display and visibility
CSS reference: visibility property
❮ Style Object
