Website Design Edmonton       Website Design Feedback       Website Design Sitemap     Contact Website Design Company
Website Designers R Us - Home
Controlling Element 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>

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.
Return to Listing
Website Designers R Us is a professional Internet strategy and Web design company based in Toronto, Canada. We specialize in best-in-class website design, online marketing, Flash multimedia, corporate identity and print graphics. Website Designers R Us features an integrated team of web consultants, creative designers, writers, programmers and marketing professionals that know how to get online results
 Home          ::             About Us          ::             Support            ::             Services            ::             Link Partners          ::             Contact

Copyright © 2006-2011 Website Designers R Us, a DOT Specialist Company. All rights reserved.