Quackit Logo
FREE Hosting!
With every domain you register with ZappyHost you get FREE hosting.
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

Oh, and thank you for supporting Quackit!

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!
$1.99 .info domain names!
© Copyright 2000 - 2010 Quackit.com