CSS Visibility
Visibility in CSS: This visibility property in CSS is employed to describe whether the components are visible or not.
Note: An invisible component also grabs the space over the page. If we use display property, we can create hidden component, which does not grab any space.
Syntax:
visibility: visible| hidden| collapse| initial| inherit;
Visibility Attributes
| Attributes | Description |
| visible | This attribute is used as a default value. The visible attribute describes that a component is visible. |
| hidden | It describes that the component is invisible (still grab the space). |
| collapse | This value is only applied to various tables. It can also be applied to remove the row and the column, but it will not disturb the layout of a table. The space grabbed by the column and row will be applicable for various other contents. When collapse value is applied to any other content, it delivers as “hidden.” |
| initial | This value is employed to set-up the visibility attribute to its default value. |
| inherit | This value can acquire this attribute from the parent element. |
Visibility Example
<!DOCTYPE html>
<html>
<head>
<style>
h1#visible
{
visibility: visible;
}
h1#hidden
{
visibility: hidden;
}
</style>
</head>
<body>
<h1 id= "visible"> This is visible </h1>
<h1 id= "hidden"> This is invisible </h1>
<p>
<strong>
Note:
</strong>
An invisible component also grabs the space over the page.
If we use display property, we can make invisible component that do not grab any space.
</p>
</body>
</html>
Output:
JavaScript Syntax:
object.style.visibility= “hidden”;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV
{
margin: left;
width: 400px;
height: 200px;
background-color: lightblue;
border: 1px solid black;
}
</style>
</head>
<body>
<p> Click on the "Click Here" button to set the visibility attribute and hide the div component.
</p>
<button onclick= "myFunction()">Click Here</button>
<div id="myDIV">It is my DIV component.</div>
<p><strong>Note:</strong>
An invisible component also grabs the space over the page. </p>
<script>
function myFunction() {
document.getElementById("myDIV").style.visibility = "hidden";
}
</script>
</body>
</html>
Output:
