Quackit Logo
Sponsored Links
$1.99 Domain Names
With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.
Create free Flash websites

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. Add this page to your Favorites
  2. Link to this page (copy/paste into your own website or blog):
  3. Help support Quackit by making a donation
  4. Add this page to your favorite social bookmarks sites:      

Oh, and thank you for supporting Quackit!

FREE Hosting!
With every domain you register with ZappyHost you get FREE hosting.
Need Website Content?
Get unique, quality digital content for your website.
  • 270+ Website Templates
  • 800+ Flash Templates
  • 25,000+ Images, Logos
  • 30,000+ e-Books
  • 15,000+ Scripts
  • 27,000+ Animated GIFs
  • 21,000+ Ringtones
  • ...and much more!
Get your content now!
© Copyright 2000 - 2010 Quackit.com