DHTML

DHTML Navbar
Hide/Display Text
DHTML Examples

Sponsored Links

$1.99 Domain Names
With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

Hide and Display Text with DHTML

You can hide and display text and other elements using the CSS visibility attribute.

I'm shy - let me hide in peace!

The following code can be used to perform the above miracle:


<script type="text/javascript" language="JavaScript">
<!--
function display(element) {
    if (document.layers && document.layers[element] != null)
        document.layers[element].visibility = 'visible';
    else if (document.all)
        document.all[element].style.visibility = 'visible';
}
function hide(element) {
    if (document.layers && document.layers[element] != null)
        document.layers[element].visibility = 'hidden';
    else if (document.all)
        document.all[element].style.visibility = 'hidden';
}
//-->
</script>

<style type="text/css">
  .hideDisplayStyle {
    visibility: hidden;
    font-weight:bold;
    color:#ff9900;}
</style>

<form>
  <input type="button"  value="Display Text" onClick="display('toggleText')">
  <input type="button"  value="Hide Text" onClick="hide('toggleText')">
</form>

<div ID="toggleText" CLASS="hideDisplayStyle">
  I'm shy - let me hide in peace!
</div>

The text only appears when its visibility attribute is set to visible - clicking the Display Text button calls our display function which sets the visibility attribute to visible. It dissappears when its visibility attribute is set to hidden - clicking the Hide Text button calls our hide function which sets the visibility to hidden. The text was originally hidden is because we had set the style a default visibility of hidden.

Enjoy this website?

Add this page to your Favorites
Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/dhtml/hide_display_text.cfm">Hide and Display Text with DHTML</a> from Quackit.com
Help support Quackit by making a donation
Add this page to your favorite social bookmarks sites: