CSS Visibility

The CSS visibility property determines whether an element is visible or hidden.

Syntax:

visibility: visible|hidden|collapse|initial|inherit;

visible: It is the by a default value and the element is visible.

hidden: The element is invisible (takes up space).

collapse: It is used only for table elements.

initial: Set this property to its default value.

inherit: This property from its parent element.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1.visible {
  visibility: visible
}
h1.hidden {
  visibility: hidden
}
</style>
</head>
<body>
<h1 class="visible">I am visible</h1>
<h1 class="hidden">I am invisible</h1>

</body>
</html>

OUTPUT:

CSS Visibility

JavaScript Syntax:

object.style.visibility="hidden"

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
 margin: auto;
 width: 400px;
 height: 200px;
 background-color: #b3ffb3;
 border: 1px solid #3366ff;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">This is my DIV element.</div>

<script>
function myFunction() {
  document.getElementById("myDIV").style.visibility = "hidden";
}
</script>
</body>
</html>

OUTPUT:

CSS Visibility