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

Article translations Article translations
Article ID: 199243 - View products that this article applies to.
This article was previously published under Q199243
Expand all | Collapse all

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

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

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
Keywords: 
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.

Give Feedback

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com