CSS Visibility Property
- Introduction to CSS visibility property
- Difference between CSS display and visibility property
- The syntax of the CSS visibility property
- Values of the CSS visibility property
Introduction to CSS Visibility Property
CSS visibility property is used to specify whether an element is visible or hidden. When you create a webpage, it sometimes becomes necessary to hide an element. It can happen for many reasons.
For example, you want to initially hide the content of a div, but as soon as a user hovers over it, you want to show the content of that div or depending on any condition, there may also be a need to hide and show the elements.
For example, you want to show advanced options to users who have paid for the service of your website and you want to show limited options to those who have not paid or those who are free customers.
Whatever the reason, there is a visibility property available in CSS for this purpose, through which you can hide and show elements, through which you can hide and show the elements. Let us know what is the visibility property?
CSS visibility is a property that can hide or show an element without changing or affected its layout.
Here, by changing or affecting the layout, it means that even if the element is not visible, it will also cover the space as much as it covers when it is visible. When that element is invisible, the white space will show and no other element can be shown in its space.
If this thing is said in simple terms, whether the element is visible or not, but the required white space must be created for it.
Difference Between CSS Display and Visibility Property
In CSS, both display and visibility are used to hide properties but you do not have to confuse it because these two properties hide the elements in different ways.
When an element is hidden by the display property, it gets completely hidden and there is no white space for it. Elements after such elements show up in place of those elements.
But as you know, this does not happen with this property and the white space of the element is created. So when you have to not hide the layout and hide the element then you should use the visibility property.
Syntax of CSS Visibility Property
The general syntax of the Visibility property has been given below.
visibility: hidden | visible | collapse | initial | inherit;
As you can see in the above syntax, the visibility property can have five possible values. Let's try to know about them.
Values of CSS Visibility Prop
The values of the Visibility property have been explained below.
- hidden – The element gets hidden from this value.
- visible - This is the default value of any element in which the element is fully visible.
- collapse - This value is used mainly for tables. With this value, you can hide a particular row or column. By doing so, other row or columns take place instead of that row or column. If this value is used with other elements then it works like a hidden.
- initial - It sets the value property to the default value.
- inherit - It sets the value property to the value of the parent element. Example of CSS Visibility Property
The use of CSS visibility property has been explained by the below example.
The above example will produce the below output.
<!DOCTYPE html>
<html>
<head>
<title> CSS Visibility Property Example </title>
<style>
#P1 {
border: 3px solid blue;
visibility: hidden;
width: 300px;
}
#P2 {
border: 3px solid red;
visibility: visible;
width: 300px;
}
#P3 {
border: 3px solid yellow;
visibility: collapse;
width: 300px;
}
#P4 {
border: 3px solid green;
visibility: initial;
width: 300px;
}
#P5 {
border: 3px solid blue;
visibility: inherit;
width: 300px;
}
</style>
</head>
<body>
<p id = "P1"> This is a first paragraph which is hidden because of "hidden" value of the visibility property in CSS but white space created by the browser. </p>
<p id = "P2"> This is the second paragraph which can’t take space of the above paragraph because the above paragraph is hidden value using for the visibility property. This paragraph is visible below the first paragraph. </p>
<p id="P3">This is Third paragraph which is not visible because of using "collapse" value for the visibility property in CSS. </p>
<p id="P4">This is Fourth paragraph using "initial" value for the visibility property in CSS. </p>
<p id="P5">This is Fifth paragraph using "inherit" value for the visibility property in CSS. </p>
<style>
#P1 {
border: 3px solid blue;
visibility: hidden;
width: 300px;
}
#P2 {
border: 3px solid red;
visibility: visible;
width: 300px;
}
#P3 {
border: 3px solid yellow;
visibility: collapse;
width: 300px;
}
#P4 {
border: 3px solid green;
visibility: initial;
width: 300px;
}
#P5 {
border: 3px solid blue;
visibility: inherit;
width: 300px;
}
</style>
</head>
<body>
<p id = "P1"> This is a first paragraph which is hidden because of "hidden" value of the visibility property in CSS but white space created by the browser. </p>
<p id = "P2"> This is the second paragraph which can’t take space of the above paragraph because the above paragraph is hidden value using for the visibility property. This paragraph is visible below the first paragraph. </p>
<p id="P3">This is Third paragraph which is not visible because of using "collapse" value for the visibility property in CSS. </p>
<p id="P4">This is Fourth paragraph using "initial" value for the visibility property in CSS. </p>
<p id="P5">This is Fifth paragraph using "inherit" value for the visibility property in CSS. </p>
</body>
</html>
The above example will produce the below output.
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.