Microsoft KB Archive/199243

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

Article ID: 199243

Article Last Modified on 8/8/2007

-

APPLIES TO


 * Microsoft Internet Explorer 4.0 128-Bit Edition
 * Microsoft Internet Explorer 4.01 Service Pack 2
 * Microsoft Internet Explorer 4.01 Service Pack 1
 * Microsoft Internet Explorer 4.01 Service Pack 2
 * Microsoft Internet Explorer 5.0

-



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.

DHTML Test .visi1 { visibility:"visible" } .visi2 { visibility:"hidden" } .disp1 { display:"block" } .disp2 { display:"none" }

Displaying and hiding text

The following two examples show two methods to show and hide text dynamically.

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://msdn2.microsoft.com/en-us/library/ms950396.aspx

Additional query words: display visibility inline block style stylesheet

Keywords: kbdhtml kbfaq kbhowto KB199243

-

[mailto:TECHNET@MICROSOFT.COM Send feedback to Microsoft]

© Microsoft Corporation. All rights reserved.