Hide and Display Text with DHTML

<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>