Quackit Logo

DHTML

DHTML Navbar
Hide/Display Text
DHTML Examples

FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$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

Print Version

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?

  1. Link to this page (copy/paste into your own website or blog):
  2. Add this page to your favorite social bookmarks sites:
               
  3. Add this page to your Favorites

Oh, and thank you for supporting Quackit!

Need Content for your Website?

Get unique, quality digital content for your website. You can even earn money by reselling it!

Includes:

  • Over 29,000 Ebooks
  • Over 7,000 Website templates
  • Over 11,000 Fonts
  • Over 39,000 Logos
  • Over 1,000 Cell Phone Games
  • Over 3,000 Cell Phone Images
  • Over 21,000 Ring Tones
  • ...and much more!
Get your 10GB webmaster package now!