Visibility

The browser-independent W3C Standard's way to set and get an element's visibility is via the style object's visibility property. The visibility property may have three possible values:

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

The algorithm is straightforward. When the user clicks the left or right button, we ask in handleClick() whether the visibility property is not "hidden". If it's not "hidden", we set its property to "hidden" and switch the value of the left button to reflect the change ("Show Other Button"). If the right button is "hidden", we set its property to "visible" and switch the value of the left button, accordingly, to "Hide Other Button". This script does not work on Mac IE4.5.

When you initially place an element, its default visibility is an empty string (""). The following code segment renders two buttons and their onclick event handler:

<FORM>
<INPUT ID="button3" STYLE="position:relative; left:0;" TYPE="button"
  VALUE="Show Visibility of Other Button" onclick="handleClick2()">
<INPUT ID="button4" STYLE="position:relative; left:150;" TYPE="button"
  VALUE="Show My Visibility" onclick="handleClick2()">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
function handleClick() {
  alert('visibility = "' +
  document.getElementById('button4').style.visibility + '"');
}
// -->
</SCRIPT>

Click the left button to find out the visibility value of the right button. It should show an empty string:

Now you know how to test if an element is visible or hidden. There are two ways:

if (visibility == "")...

or:

if (visibility != "hidden")...

Setting the visibility property in the STYLE attribute will switch the default value from "" to "visible":

<FORM>
<INPUT ID="button5" STYLE="position:relative; left:0;
  visibility:visible;" TYPE="button" VALUE="Show Visibility
  of Other Button" onclick="handleClick3()">
<INPUT ID="button6" STYLE="position:relative; left:150;
  visibility:visible;" TYPE="button" VALUE="Show My
  Visibility" onclick="handleClick3()">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
function handleClick3() {
  alert('visibility = "' +
  document.getElementById('button6').style.visibility + '"');
}
// -->
</SCRIPT>

Click the following buttons to verify that indeed the default visibility value is "visible" and not "":

Since the default visibility is "", instead of checking whether an element is visible or not, we can test if it is not "hidden":

if (visibility != "hidden")...

You can also set visibility to "visible". Needless to say, you have to do it in the element's STYLE attribute, or in JavaScript, before the first query of visibility.

Next: How to mimic blinking