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 renders 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>

Output:

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>

Output:

Explanation:

The above is a javascript example.

Please Share