Controlling the Visibility of elements Working with CSS

CSSWeb DevelopmentFront End Technology

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.NoValue & Description
1Visible
It is default, element and its children are visible
2hidden
It hides the element and its children are invisible, but element is still rendered and given appropriate space on the page
3collapse
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’
4initial
It sets the visibility of the element to its default value
5inherit
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 −

 Live Demo

<!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 −

 Live Demo

<!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 −

raja
Published on 07-Jan-2020 12:22:34
Advertisements