BlogsDope image BlogsDope

CSS visibility

Jan. 10, 2018 CSS HTML 1482

The visibility property is used to change the visibility of elements, i.e., it can show or hide elements. It does not lead to any change in the layout on hiding an element.

CSS

visibility: value;

The element hidden by this property still exists in the document and takes the same space as it would take if it were visible. If you want to remove an element completely from the document so that it does not take any space, then set the display property to none.

Values

visible : Makes the element visible. This is the default value.

hidden : Makes the element invisible, but the element still takes the same space and affects the layout of the document. Descendants of the element will be visible if they are set to visibility: visible.

collapse : For table elements, it hides the row or column such that it does not occupy any space (as in display: none). However, the widths and heights of other rows and columns are still calculated as if the collapsed cells are present.

For all other elements, this value behaves the same as hidden.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

Look at the first example.

HTML

<h1>This is first heading</h1>
<h2>This is second heading</h2>
<h3>This is third heading. Notice that the second heading is hidden but still takes space.</h3>

CSS

h1 {
  visibility: visible  
}

h2 {
  visibility: hidden;
}

h3 {
  visibility: visible;
}

See the Pen visibility property example by Aakhya Singh (@aakhya) on CodePen.

In the above example, the second heading is given visibility: hidden which made the heading invisible, but it still takes the same space that it would have taken if it were visible.

Look at another example.

HTML

<p>This is a hidden paragraph with a child span element. <span>This is a visible span element inside a hidden paragraph.</span> This is the end of the paragraph.</p>

CSS

p {
  visibility: hidden;
}

span {
  visibility: visible;
}

See the Pen Visible child of hidden parent by Aakhya Singh (@aakhya) on CodePen.

As stated above, a child of a hidden element can be made visible by giving it visibility: visible. So, in the above example, the span element is made visible which is a child of the p element which is hidden.

The following example shows the second cell of a table getting collapsed on giving it visibility: collapse.

See the Pen Collapsing table cell using visibility: collapse by Aakhya Singh (@aakhya) on CodePen.

In the same way, entire table rows, columns, row groups or column groups can be collapsed.

Browser Support

This property is supported in all the major browsers. However, support for the value collapse differs in different browsers.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).