December 15, 2000 - Controlling Element Visibility

Yehuda Shiran December 15, 2000
Controlling Element Visibility
Tips: December 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

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:

"")
  • "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.