Setting Element Visibility On-the-Fly

Another way to make the elements in your pages dynamic is by using the visibility style property, which you can set to "visible" or "hidden" to show or hide elements. Here's an example that does exactly that, showing or hiding some text when the user clicks a button:

(Listing 16-10.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Making elements visible using the visibility property          </TITLE>          <SCRIPT LANGUAGE="JAVASCRIPT">              <!--  function showAll()   {   document.getElementById("div1").style.visibility = "visible"   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <H1>              Making elements visible using the visibility property          </H1>          <FORM NAME="form1">              <INPUT TYPE="BUTTON" VALUE="Click Me" ONCLICK="showAll()">              <BR>              <BR>  <DIV ID="div1" STYLE="visibility:hidden">   Here's some additional text!  </DIV>          </FORM>      </BODY>  </HTML>

You can see the results in Figure 16.8.

Figure 16.8. Making invisible text visible.

graphics/16fig08.gif

In fact, you also can use the display style property to do the same thing. Here's an example showing how to show or hide the same text using this property, not the visibility property (you'll need version 6+ if you're using Netscape Navigator):

(Listing 16-11.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Making elements visible using the display property          </TITLE>          <SCRIPT LANGUAGE="JAVASCRIPT">              <!--  function showAll()   {   document.getElementById("div1").style.display = ""   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <H1>              Making elements visible using the display property          </H1>          <FORM>              <INPUT TYPE="BUTTON" VALUE="Click Me" ONCLICK="showAll()">              <BR>              <BR>  <DIV ID="div1" STYLE="display: none">   Here's some additional text!   </DIV>  </FORM>      </BODY>  </HTML>

You can see the results in Figure 16.9.

Figure 16.9. Using the `display` property in the Netscape Navigator.

graphics/16fig09.gif

Setting Element Visibility On-the-Fly

(Listing 16-10.html on the web site)

Figure 16.8. Making invisible text visible.

(Listing 16-11.html on the web site)

Figure 16.9. Using the display property in the Netscape Navigator.

Figure 16.9. Using the `display` property in the Netscape Navigator.