12 out of 17 rated this helpful - Rate this topic

visibility property

Sets or retrieves whether the content of the object is displayed.

Syntax

visibility: visible | hidden | collapse | inherit

Property values

inherit: Default. Object inherits the visibility of the next parent object.
visible: Object is visible.
hidden: Object is hidden.
collapse: Internet Explorer 8. Used in tables to remove tr and col; for all other elements, same as hidden.

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value

Remarks

Unlike display, objects that are not visible still reserve the same physical space in the content layout as they would if they were visible. You can change the visibility through scripting to show and hide overlapping content based on user interaction. For document style scripting information, see Introduction to Dynamic Styles.

As of Microsoft Internet Explorer 5, a child object can be visible when its parent is hidden. With Microsoft Internet Explorer 4.0, the parent object must be visible for a child object to be visible.

Examples

The following examples use the visibility attribute and the visibility property to determine whether the object is visible.

This example uses two calls to an embedded (global) style sheet to hide and then show the image when the user moves the mouse over and off the text.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/visibility_h.htm


<head>
<style>
.vis1 {
    visibility: visible;
}
.vis2 {
    visibility: hidden;
}
</style>
</head>
<body>
<img id="oSphere" src="sphere.jpg" alt="sphere">
<p onmouseover="oSphere.className='vis2'" 
    onmouseout="oSphere.className='vis1'">
Mouseover this text to make the sphere disappear.</p>
</body>

This example uses a call to a function to hide the image.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/visibility_s.htm


<head>
<script type="text/javascript">
function disappear()
{
    oSphere.style.visibility="hidden"; 
    }
function reappear()
{
    oSphere.style.visibility="visible"; 
    }
</script>
</head>
<body>
<img src="sphere.jpeg" id="oSphere">
<p id="oTxt" onmouseover="disappear()" onmouseout="reappear()">Move the mouse 
over this text to make the sphere disappear.</p>
</body>

Community Additions

ADD