Using the CSS visibility property, you can make any element or group of elements invisible. This enables your application to selectively display different parts of a document over time when used in combination with the DOM (Document Object Model) exposed to JavaScript.

In both fourth-generation browsers, the visibility property in a style definition can be assigned one of three values: visible, hidden, or inherit. The inherit value simply instructs the browser to show the element of its parent element if it is visible, and to hide it if its parent is hidden. In most cases, the parent element is the document body itself, which is always visible.

The real usefulness of this feature becomes apparent when you change it dynamically. Because all CSS-P data is reflected through the DOM, you can change the visibility property value whenever you want. Like the left and top properties, visibility is a property of an element's style object. For example, if an element's ID attribute has a value of "example", its visibility property is:

• document.example.visibility, in Navigator.
• example.style.visibility, or document.all.example.style.visibility, in Internet Explorer.

When used in a stylesheet, the visibility property accepts one of three values, which are the same in Navigator 4.0x and Internet Explorer 4.0x. However, the visibility property in JavaScript differs between these two browsers:

Now that we know how to show and hide an element, let's take a look at two more animation methods:

function show() {
  this.element.visibility = (NS4) ? "show" : "visible";
}

function hide() {
  this.element.visibility = (NS4) ? "hide" : "hidden";
}

Since this.element already reflects the element's style object, all we have to do is assign a value to its visibility property. Notice the differences between Navigator and Internet Explorer.