Visibility: the 'visibility' property

'visibility'

Value:	visible | hidden | collapse | inherit
Initial:	inherit
Applies to:	all elements
Inherited:	no
Percentages:	N/A
Media:	visual

The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether). Values have the following meanings:

visible

The generated box is visible.

hidden

The generated box is invisible (fully transparent), but still affects layout.

collapse

Please consult the section on dynamic row and column effects in tables. If used on elements other than rows or columns, 'collapse' has the same meaning as 'hidden'.

This property may be used in conjunction with scripts to create dynamic effects.

In the following example, pressing either form button invokes a user-defined script function that causes the corresponding box to become visible and the other to be hidden. Since these boxes have the same size and position, the effect is that one replaces the other. (The script code is in a hypothetical script language. It may or may not have any effect in a CSS-capable UA.)

Choose a suspect:



         width="100" height="100"

       src="suspect1.jpg" />

  
Name: Al Capone

  
Residence: Chicago







         width="100" height="100"

       src="suspect2.jpg" />

  
Name: Lucky Luciano

  
Residence: New York





     action="http://www.suspect.org/process-bums">

  


           value="Capone"

         onclick='show("container1");hide("container2")'>

           value="Luciano"

         onclick='show("container2");hide("container1")'>