Select the product you need help with

How To Dynamically Display and Hide HTML Elements Using Style Sheet Properties

Article ID: 199243 - View products that this article applies to.

This article was previously published under Q199243

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:

http://msdn.microsoft.com/en-us/library/aa141508(v=office.10).aspx

(http://msdn.microsoft.com/en-us/library/aa141508(v=office.10).aspx)

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

http://msdn2.microsoft.com/en-us/library/ms950396.aspx

(http://msdn2.microsoft.com/en-us/library/ms950396.aspx)

Properties

Article ID: 199243 - Last Review: April 28, 2012 - Revision: 2.0

APPLIES TO

Microsoft Internet Explorer 4.01 Service Pack 1

kbdhtml kbfaq kbhowto KB199243

Retired KB Content Disclaimer

This article was written about products for which Microsoft no longer offers support. Therefore, this article is offered "as is" and will no longer be updated.