CSS Visibility
CSS is all about presentation. Discover how CSS Visibility works to transform plain HTML into a premium user experience in the guide below.
The CSS visibility attribute determines if an element is visible or hidden.
Note: An unseen element also occupies space on the webpage. You can utilize the display property to generate hidden elements that do not affect layout.
Syntax:
visibility: visible|hidden|collapse|initial|inherit;
CSS Visibility Parameters
By default, the value "visible" indicates that the element is currently displayed on the screen.
hidden: It indicates that the element is not visible on the screen, yet it occupies space within the layout.
The collapse property is specifically intended for table elements. Its purpose is to eliminate a row or column without impacting the overall table layout.
The area occupied by the row or column will be free for additional content.
If the collapse property is applied to other elements, they will be displayed as "hidden".
It is utilized to restore this property to its default value.
Inheritance: It is utilized to acquire this attribute from its parent element.
CSS Visibility 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>
<p><strong>Note:</strong> An invisible element also take up the space on the page.
By using display property you can create invisible elements that don't
take space.</p>
</body>
</html>
JavaScript Syntax:
object.style.visibility="hidden"
See the JavaScript example:
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
margin: auto;
width: 400px;
height: 200px;
background-color: lightpink;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the "Try it" button to set the visibility property and hide the div element.</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">This is my DIV element.</div>
<p><strong>Note:</strong> An invisible element also take up the space on the page. </p>
<script>
function myFunction() {
document.getElementById("myDIV").style.visibility = "hidden";
}
</script>
</body>
</html>
