3. Show and Hide a Div

Main Points

• Unobtrusive Javascript Example 3 Turn the display property of a div on and off.
• ^{Skip to Main Points} links return to the Main Points menu.

Unobtrusive Javascript Example 3

This page calls a Javascript file. The onmouseover events which the div in red responds to is in the Javascript file, not this html document. However, in this test, not only does the red div respond to an onmouseover event, but now it responds to an onmouseout event as well. An extra event handler is called.

When you mouse over the red div, the blue div is reset from display:none to display:block and it appears. When you mouse out of the red div, the blue div's display is reset to none and it disappears. The Breakaway function includes the functionality to turn off the div in the unobtrusive script.