• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 21. Cascading Style Sheets and C... > Showing and Hiding Elements

Showing and Hiding Elements

JavaScript programmers also find a lot of use for the visibility property, which enables you to toggle the visibility of elements. Here’s how we used that property in Chapter 12, “Working with Forms, Buttons, Check Boxes, and Radio Buttons,” (Listing 12-13.html) to show and hide some extra controls (if using Netscape Navigator, you’ll need version 6.0 or later):

<HTML> 
    <HEAD> 
        <TITLE>Showing and hiding controls</TITLE> 
        <SCRIPT LANGUAGE="JavaScript"> 
            <!--
                function checkClicked(check)
					{
					if(check.checked) {
					document.form1.button1.style.visibility= "visible"
					document.form1.button2.style.visibility= "visible"
					} else {
					document.form1.button1.style.visibility= "hidden"
					document.form1.button2.style.visibility= "hidden"
					}
					}
					function hideButtons()
					{
					document.form1.button1.style.visible = false
					document.form1.button2.style.visible = false 
                } 
                // --> 
        </SCRIPT> 
    </HEAD> 

    <BODY> 
        <H1>Showing and hiding controls</H1> 

        <FORM NAME="form1"> 
            <INPUT TYPE="BUTTON" VALUE="Check spelling" NAME="button1" STYLE="visibility:hidden"> 
            <INPUT TYPE="BUTTON" VALUE="Change case" NAME="button2" STYLE="visibility:hidden"> 
            <BR> 
            <INPUT TYPE="TEXT" NAME="text1"> 
            <INPUT TYPE = "CHECKBOX" NAME = "check1" ONCLICK = "checkClicked(this)">Show all options 
         </FORM> 
    </BODY> 
</HTML> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint