HOWTO: Dynamically Display and Hide HTML Elements Using Style Sheet Properties

ID: Q199243

The information in this article applies to:

Microsoft Internet Explorer (Programming) versions 4.0, 4.01, 4.01 SP1, 4.01 SP2, 5

SUMMARY

Internet Explorer 4.0 and above provide a rich set of programming features to Web authors through Dynamic HTML (DHTML) scripting and its support of Cascading Style Sheets. This article shows how to script the display and visibility stylesheet properties to dynamically display or hide elements on the page.

MORE INFORMATION

The following sample code demonstrates how to display or hide text inside a P tag using the two stylesheet properties. Save the following HTML code to your desktop as dhtmtest.htm and then open it in Internet Explorer 4.0 or higher. You will see two table columns demonstrating how to display and hide text by toggling stylesheet properties with JavaScript.

Each example shows the use of the visibility and display style properties. The difference between the two properties when hiding text is that display=none does not reserve space for the object on the screen whereas visibility=hidden preserves the space used by the element but does not render the object to the screen.

Also, the display properties inline and block were not supported in Internet Explorer 4.x, but using these values still displays the elements as usual. With Internet Explorer 5, you should set the appropriate display property value based on whether the element is an inline or block element. Block elements typically start a new line and inline elements do not.


<html>

<head>
<title>DHTML Test</title>
<style>
  .visi1 { visibility:"visible" }
  .visi2 { visibility:"hidden" }
  .disp1 { display:"block" }
  .disp2 { display:"none" }
</style>
</head>

<body>

<h3 align="center">Displaying and hiding text</h3>

<p align="center">The following two examples show two methods 
to show and hide text dynamically.</p>

<div align="center"><center>
<table border="1">
<tr>
    <th>Changing Stylesheet</th>
    <th>Changing inline style</th>
</tr>
<tr>
    <td valign="top">
        <p onMouseOver="HideMe1.className='visi2'"
           onMouseOut="HideMe1.className='visi1'">
           Move the mouse over this text to make the following
           text disappear.
        </p>
        <div id="HideMe1"> <p>DHTML using VISIBILITY</p> </div>
        <p onMouseOver="HideMe2.className='disp2'"
		   onMouseOut="HideMe2.className='disp1'">
		   Move the mouse over this text to make the following
		   text disappear.
        </p> <div id="HideMe2"> <p>DHTML using DISPLAY</p> </div>
        <p>When the DISPLAY text disappears, this text moves up.</p>
    </td>
		
    <td valign="top">
        <p onMouseOver="HideMe3.style.visibility='hidden'"
           onMouseOut="HideMe3.style.visibility='visible'">
           Move the mouse over this text to make the following
           text disappear.
        </p>
        <div id="HideMe3"> <p>DHTML using VISIBILITY</p> </div>
        <p onMouseOver="HideMe4.style.display='none'"
           onMouseOut="HideMe4.style.display='block'">
           Move the mouse over this text to make the following
           text disappear.
        </p>
        <div id="HideMe4"> <p>DHTML using DISPLAY</p> </div>
        <p>When the DISPLAY text disappears, this text moves up.</p>
    </td>
</tr>
</table>
</center>
</div>
</body>
</html>

Documentation about Cascading Style Sheets and DHTML can be found at the following URL under the DHTML, HTML, and CSS section:

http://msdn.microsoft.com/workshop

Information about the scripting languages can be found at the following URL:

http://msdn.microsoft.com/scripting/

Additional query words: display visibility inline block style stylesheet

Keywords : kbDHTML kbGrpInet kbDSupport kbIEFAQ
Version : WINDOWS:4.0,4.01,4.01 SP1,4.01 SP2,5
Platform : WINDOWS
Issue type : kbhowto