Showing and Hiding

You might ask yourself: "Why does Netscape display the visibility as 'show'?"

Well the answer is that Netscape's CSS properties are based around it's proprietory LAYER tag. However, even Netscape is now downplaying it's LAYER tag in favour of the W3C's recommended CSS-P. So the "show" and corresponding "hide" values of the visibility property are left-overs from Netscape's layers. I believe this is the only glaring defect in how Netscape represents CSS-P.

Until there is a unified standard you'll usually have to write separate code to hide a particular element.

For Netscape

To show an element in Netscape you have to use:

document.divName.visibility = "show"

and to hide it's:

document.divName.visibility = "hide"

For Internet Explorer

To show an element in Internet Explorer you have to use: = "visible"

and to hide it's: = "hidden"

Generic Show and Hide Functions

Instead of always rewriting the same code over and over again to show and hide elements, you can use the following functions:

function showObject(obj) {
	if (ns4) obj.visibility = "show"
	else if (ie4) obj.visibility = "visible"

function hideObject(obj) {
	if (ns4) obj.visibility = "hide"
	else if (ie4) obj.visibility = "hidden"

These functions must be used along with pointer variables - see the code in the following example.

Whenever you want to change the visibility of an element, you just go:




Where objectName is your pointer variable to a particular DIV tag.

Example: showhide1.html [source] - to see this example using these functions.

Show/Hide Functions Without Pointer Variables

I've been finding that it's not always necessary, and sometimes cumbersome if you have a lot of layers that need only to be hidden and shown. I've showed the pointer variable technique first because that is general idea that I'll be building on to make more powerful JavaScripts in further lessons. But on occasions where you won't need to have any more functionality, the following simplified functions can also be used:

// Show/Hide functions for non-pointer layer/objects
function show(id) {
	if (ns4) document.layers[id].visibility = "show"
	else if (ie4) document.all[id].style.visibility = "visible"

function hide(id) {
	if (ns4) document.layers[id].visibility = "hide"
	else if (ie4) document.all[id].style.visibility = "hidden"

To use these are similar except now the exact name of the layer must be used and it also must be in quotes:




Where divID is the ID of the DIV tag that you want to show/hide.

Example: showhide2.html [source] - uses these show/hide functions

Home Next Lesson: Moving
copyright 1998 Dan Steinman