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.