The visibility
CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
To both hide an element and remove it from the document layout, set the display
property to none
instead of using visibility
.
Syntax
/* Keyword values */ visibility: visible; visibility: hidden; visibility: collapse; /* Global values */ visibility: inherit; visibility: initial; visibility: unset;
The visibility
property is specified as one of the keyword values listed below.
Values
visible
- The element box is visible.
hidden
- The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have
visibility
set tovisible
. The element cannot receive focus (such as when navigating through tab indexes). collapse
- For
<table>
rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if
were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.display
: none - Collapsed flex items are hidden, and the space they would have occupied is removed.
- For XUL elements, the computed size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect.
- For other elements,
collapse
is treated the same ashidden
.
Accessibility concerns
Using a visibility
value of hidden
on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.
Interpolation
Visibility values are interpolable between visible and not-visible. One of the start or ending values must therefore be visible
or no interpolation can happen. The value is interpolated as a discrete step, where values of the timing function between 0
and 1
map to visible
and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier()
functions with y values outside of [0, 1]) map to the closer endpoint.
Notes
- Support for
visibility: collapse
is missing or partially incorrect in some modern browsers. It may not be correctly treated likevisibility: hidden
on elements other than table rows and columns. visibility: collapse
may change the layout of a table if the table has nested tables within the cells that are collapsed, unlessvisibility: visible
is specified explicitly on nested tables.
Formal definition
Initial value | visible |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | a visibility |
Formal syntax
visible | hidden | collapse
Examples
Basic example
HTML
<p class="visible">The first paragraph is visible.</p> <p class="not-visible">The second paragraph is NOT visible.</p> <p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p>
CSS
.visible { visibility: visible; } .not-visible { visibility: hidden; }
Table example
HTML
<table> <tr> <td>1.1</td> <td class="collapse">1.2</td> <td>1.3</td> </tr> <tr class="collapse"> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table>
CSS
.collapse { visibility: collapse; } table { border: 1px solid red; } td { border: 1px solid gray; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'visibility' in that specification. |
Candidate Recommendation | Defines the collapse value as it applies to flex items. |
CSS Level 2 (Revision 1) The definition of 'visibility' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
visibility | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE
Full support
4
| Opera Full support 4 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
collapse | Chrome
Full support
1 | Edge Full support 12 | Firefox
Full support
1
| IE Full support 10 | Opera
Full support
4 | Safari
Full support
1.3 | WebView Android
Full support
≤37 | Chrome Android
Full support
18 | Firefox Android
Full support
4
| Opera Android
Full support
10.1 | Safari iOS
Full support
1 | Samsung Internet Android
Full support
1.0 |
Legend
- Full support
- Full support
- See implementation notes.
- See implementation notes.