CSS visibility Property

Make <h2> elements visible and hidden:

h2.a {
visibility: visible;
}

h2.b {
visibility: hidden;
}

More "Try it Yourself" examples below.

Definition and Usage

The visibility property specifies whether or not an element is visible.

Tip: Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout!

Default value:	visible
Inherited:	yes
Animatable:	yes. Read about animatable
Version:	CSS2
JavaScript syntax:	object.style.visibility="hidden" Try it

The numbers in the table specify the first browser version that fully supports the property.

Property
visibility	1.0	4.0	1.0	1.0	4.0

visibility: visible|hidden|collapse|initial|inherit;

Value	Description	Demo
visible	Default value. The element is visible	Demo ❯
hidden	The element is hidden (but still takes up space)	Demo ❯
collapse	Only for table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>). This value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it renders as "hidden"
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

This example demonstrates how to make a table element collapse:

tr.collapse {
visibility: collapse;
}

HTML DOM reference: visibility property