visibility

Try it

visibility: visible;

visibility: hidden;

visibility: collapse;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Hide me</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  width: 80%;
  max-height: 300px;
  display: flex;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

To both hide an element and remove it from the document layoutset 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: revert;
visibility: revert-layer;
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 to visible. The element cannot receive focus (such as when navigating through tab indexes).

collapse

The collapse keyword has different effects for different elements:

• For <table> rowscolumnscolumn groupsand row groupsthe row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). Howeverthe 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.
• Collapsed flex items and ruby annotations are hiddenand the space they would have occupied is removed.
• For other elementscollapse is treated the same as hidden.

Accessibility

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

When animatedvisibility values are interpolated 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 stepwhere values of the easing function between 0 and 1 map to visible and other values of the easing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [01]) 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 like visibility: hidden on elements other than table rows and columns.
• When applied to table rowsif the table contains cells (<td> and <th> elements) that span both visible and collapsed rowsthe cell may render in unexpected ways. If the spanning cell is defined in a collapsed rowbrowsers do not render the table cellas if the cells in subsequent rows were present with visibility: collapse applied. When the cell is defined in a visible row and spans a collapsed rowthe cell contents are not reflowedbut the presentation of the cell itself varies by browser. Most browsers reduce the block size of the cell by the block size of the hidden row. This means the contents may be larger than the cell in the block-size direction. Depending on the browserthe overflowing contents are either croppedas if overflow: hidden were setwhile the content bleeds into the subsequent row in other browsers as if overflow: visible were set. In other browsersthe cell is rendered as if the row were not collapsedwith all the other cells in the row hidden as if visibility: collapse were set on individual cells rather than the row itself.
• visibility: collapse may change the layout of a table if the table has nested tables within the cells that are collapsedunless visibility: visible is specified explicitly on nested tables.

Formal definition

Formal syntax

visibility = 
  visible       |
  hidden        |
  force-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>
  <tbody>
    <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>
  </tbody>
</table>

CSS

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

Specifications

Browser compatibility

See also

• display
• SVG visibility attribute