- '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.)
action="http://www.suspect.org/process-bums">
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
value="Capone"
onclick='show("container1");hide("container2")'>
value="Luciano"
onclick='show("container2");hide("container1")'>