Dynamic Properties: Visibility & Display

Purpose: Use Javascript to alter CSS text properties (display & visibility) to make <div>'s disappear and re-appear.

Original properties for <body>, <div id="div1">, <div id="div2"> and <div id ="div3"> are listed below.

body {
font-family: sans-serif;
font-size: 1em;
background-color: #EEEEEE;
margin-left: 5px;
}

#div1 {
display: none;
color: #993300;
background-color: #99CCFF;
}

#div2 {
display: none;
color:#000066;
background-color: #FFFFCC;
}

#div3 {
visibility: hidden;
color:#CCCCCC;
background-color: #666666;
}

This is <div id = "div3"> The visibility property can be hidden or visible. Whether or not the text is visible, the browser reserves exactly the same amount of blank space.

This is <div id = "div1"> The display property of this text is controlled by Javascript. If you see the text, the display property is set to block and, of course, the text takes up space. When the display property is set to none, not only will this text disappear, but the space for this text will collapse.

This is <div id = "div2"> and it works exactly like <div id = "div1"> except it contains this text. Note that you can see either, neither or both div's at the same time.

Click here to call javascript function toggleDisplay() to toggle <div id="div1"> between {display: none;} and [display: block;}

Click here to call javascript function toggleDisplay() to toggle <div id="div2"> between {display: none;} and [display: block;}

When you move the mouse over the image, javascript function toggleVisibility() toggles the properties of <div id="div3"> between {visibility: hidden;} and {visibility: visible;}. Thus you will see (or not) the text in <div id="div3"> in the space reserved for it.