CSS Visibility

To specify an element to be visible or invisible, the CSS Visibility property is used. Both the invisible and invisible elements take up space on a web page. To create an invisible element with no space taken, the display property can be used.

Syntax:

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

Parameters:

  • visible: It is used to define an element to be visible.
  • hidden: It is used to define an element as invisible.
  • collapse: For a table element, this parameter eliminates a row or a column. The table layout is however not affected. For other elements, this parameter is rendered as “hidden”.
  • initial: To set this property to its default value, the “initial” parameter is utilized.
  • inherit: To inherit this property from its parent element, the “inherit” parameter is utilized.

Example:

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

Explanation:

In the above example, we displayed the use of the CSS visibility property.

JavaScript Syntax:

object.style.visibility="hidden"

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#div {
margin: auto;
padding:10px;
background-color: crimson;
color: white;
text-align: center;
border: 5px solid brown;
}
</style>
</head>
<body>
<p>Click the button to see the effect.</p>
<button onclick="myFunction()">Click Me</button><br><br>
<div id="div">Hello World!!</div>
<script>
function myFunction() {
document.getElementById("div").style.visibility = "hidden";
}
</script>
</body>
</html>

Explanation:

The above is a javascript example.