CSS Visibility

The CSS visibility property is used to specify whether an element is visible or not.

Note: An invisible element also take up the space on the page. By using display property you can create invisible elements that don't take up space.

Syntax:

CSS Visibility Parameters

visible:It is the by default value. It specifies that the element is visible.

hidden:It specifies that the element is invisible (but still takes up space).

collapse:It is used only for table elements. It is used to remove a row or column, but it does not affect the table layout.

The space taken up by the row or column will be available for other content.

If collapse is used on other elements, it renders as "hidden"

initial:It is used to set this property to its default value.

inherit:It is used to inherit this property 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>

Test it Now

JavaScript Syntax:

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>

Test it Now

Next TopicCSS Counters

← prev next →