• An empty string ("")
• "hidden"
• "visible"

An element is visible when its style object's visibility property is either empty ("") or "visible". It is invisible when the property is "hidden". The following code segment renders two buttons and their onclick event handler:

<FORM>
<INPUT ID="button1" 
       STYLE="position:relative; left:0;" 
       TYPE="button" VALUE="Hide Other Button" 
       onclick="handleClick()">
<INPUT ID="button2" 
       STYLE="position:relative; left:150;" 
       TYPE="button" VALUE="Hide Me" 
       onclick="handleClick()">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
function handleClick() {
  if (document.getElementById('button2').style.visibility != "hidden") {
    document.getElementById('button2').style.visibility = "hidden";
    document.getElementById('button1').value = "Show Other Button";
  }
  else {
    document.getElementById('button2').style.visibility = "visible";
    document.getElementById('button1').value = "Hide Other Button";
  }
}
// -->
</SCRIPT>

Click the left button to hide and reveal the right button:

People who read this tip also read these tips:

• Detecting the CTRL Key
• Modifying Options on the Fly
• Content Rendering
• Reading an Attribute Node in IE6 and NS6
• Netscape 6 Event Handler Specification