css - visibility

A property called visibility allows you to hide an element from view. You can use this property alongwith Javascript to create very complex menu and very complex webpage layouts.

You may choose to use the visibility property to hide error messages that are only displayed if the user needs to see them, or to hide answers to a quiz until the user selects an option.

NOTE: Remember that the source code will still contain whatever is in the invisible paragraph, so you should not use this to hide sensitive information such as credit card details or passwords.

The visibility property can take the values listed in the table that follows:

ValueDescription
visibleThe box and its contents are shown to the user.
hiddenThe box and its content are made invisible, although they still affect the layout of the page.
collapseThis is for use only with dynamic table columns and row effects.

Here is the example:

<p>
This paragraph should be visible in normal way.
</p>
<p style="visibility:hidden;">
This paragraph should not be visible.
</p>

This will produce following result:

This paragraph should be visible in normal way.

This paragraph should not be visible.


Spacer Bottom Left Corner ImageBottom Right Corner Image
Valid XHTML 1.0 Strict  Valid CSS! Check the accessibility of this site according to U.S. Section 508