CSS Visibility property is used to specify a value corresponding to whether the element will be visible or not in the document. Though the element is rendered but if CSS Visibility is set to hidden then it is not made visible.
Following are the CSS Visibility values used to control the element’s visibility −
| Sr.No | Value & Description |
|---|---|
| 1 | Visible It is default, element and its children are visible |
| 2 | hidden It hides the element and its children are invisible, but element is still rendered and given appropriate space on the page |
| 3 | collapse It is used only for table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>). This value removes a row or column, and space taken up by the row or column will be available for other content If used on other elements, it renders as ‘hidden’ |
| 4 | initial It sets the visibility of the element to its default value |
| 5 | inherit It specifies that the value of the visibility property should be inherited from the parent element |
Example
Let’s see an example of CSS Visibility property −
<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility collapse</title>
<style>
form ,table{
width:70%;
margin: 0 auto;
text-align: center;
}
table, th, td {
border-collapse: collapse;
border: 1px solid black;
}
thead {
background-color: goldenrod;
}
tbody{
background-color: khaki;
}
tr:nth-of-type(3){
visibility: collapse;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-collapse</legend>
<table>
<thead>
<tr><th>Name</th><th>Course</th></tr>
</thead>
<tbody>
<tr><td>Joana</td><td>MBA</td></tr>
<tr><td>Smith</td><td>B.Arc</td></tr>
<tr><td>Xersus</td><td>M.Sc</td></tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>Output
This will produce the following output −
CSS Visibility collapse is not applied −
CSS Visibility collapse is applied −
Example
Let’s see an example for CSS Visibility hidden −
<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility hidden</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-hidden</legend>
<div id="container">
<div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
</div><br>
<input type="button" value="Hide Primary Colors" onclick="visibilityHidden()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function visibilityHidden(){
for(var i=0; i<3; i++)
primaryColor[i].style.visibility = 'hidden';
}
</script>
</body>
</html>Output
This will produce the following output −
Before clicking ‘Hide Primary Colors’ button −
After clicking ‘Hide Primary Colors’ button −
