The visibility property allows you to hide or show a layer. We're going to create a function to toggle the visibility of a layer. Let's start by defining our example layer.

<div id="myLayer1" style="position:absolute;left:100;top:100;visibility:visible">This is our Layer</div>

Not so fast

Before beginning, there is one caveat I must mention concerning visibility, and as you guessed it, it mainly deals with Netscape 4. To define visibility in NN 4, you are supposed to use "show" and "hide"; in other browsers, you use "visible" and "hidden" as recommended by the W3C. If you define style="visibility:hidden" in a layer, NS 4 does hide the layer appropriately; however, it interprets that as "hide." So when "asked" it's visibility, the layer won't respond "hidden" (even though that's how we defined it); instead, it will respond "hide."

First, what we are going to do is detect if visibility is set to "hidden" or "hide". If visibility is set to hidden, we'll show the layer. Otherwise (if visibility is set to "show" or "visible" or if the layer's visibility is not defined, which it is inherited as visible), we'll hide the layer.

Code Segments

If our layer is hidden, here's the code to make it visible:

if(accessCSS(layerID).visibility=="hidden" || accessCSS(layerID).visibility=="hide"){
      accessCSS(layerID).visibility= "visible";
}

If our layer is visible (or visibility is not set), we can hide it with:

}else{
      accessCSS(layerID).visibility= "hidden";
}

Put it all together

We can now simply combine these into a function:

<script>
      function toggleVis(layerID){
            if(accessCSS(layerID).visibility=="hidden" || accessCSS(layerID).visibility=="hide"){
                  accessCSS(layerID).visibility= "hidden";
            }else{
                  accessCSS(layerID).visibility= "visible";
            }
      }
</script>

Here's that script in action: Example 3

Note that you are not required to set visibility for your layer to be able to use that property (it's inherited as visible, then).

Remember the scrolling text example from Part 1? Let's now examine it.

Next -->