CSS - Visibility

Advertisements

Previous Page
Next Page  

A property called visibility allows you to hide an element from view. You can use this property along with 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 −

Sr.No. Value & Description
1

visible

The box and its contents are shown to the user.
2

hidden

The box and its content are made invisible, although they still affect the layout of the page.
3

collapse

This is for use only with dynamic table columns and row effects.

Here is an example −

Live Demo 
<html>
   <head>
   </head>

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

It will produce the following result −

Advertisements