Visibility Versus Display

Click on the blue text below. Notice the difference between visibility and display.

Visibility	Display
Click here to see more data: This is sample data made visible. The space for this content is already taken up, even though the content is initially invisible. Here is more information that follows the hidden data.	Click here to see more data: This is sample data that is being displayed. The space for this content is not taken up until the content is displayed. Notice how the line following this data automatically moves down. Here is more information that follows the hidden data.

There are two attributes in CSS to hide and show data: the display and visibility attributes. The visibility attribute allows content to be hidden, with the content still taking up space in the flow. The display attribute allows the content to be removed from the flow, allowing creation of dynamic and interactive content, such as outlines. Both attributes are supported by Dynamic HTML in Microsoft® Internet Explorer 4 and 5. This example demonstrates the difference between dynamically changing the visibility and changing the display of CSS attributes.