Hidden Layers

In this tutorial, you will learn how to create extra menus or pages that show up with the click of a hyperlink. There are four parts to this script.

Part I

You want to create a function that enables a set of hidden layers to function.

    function showLayer(layerid) {
        layer = document.getElementById(layerid);
        layer.style.display="inline";
    }
    function hideLayer(layerid) {
        layer=document.getElementById(layerid);
        layer.style.display="none";
    }

Part II

Create the layers using divs or tables. Assign IDs to the layers.

For instance:

<div id="about">
    <h4>About Me</h4>
    Here's a bit of info about myself that you might find interesting.
</div>
<div id="contents">
    <h4>Welcome</h4>
    Here's some content....
</div>

*Note: I created an extra div section at the end so the blog body can disappear when I click on the link to the hidden layer page.

Part III

In the CSS, set the ID properties like this:

<style type="text/css">
#about {
    display:none;
    width:400px;
    /*you can put whatever other
    properties here*/
}
#contents{
    /*insert style info here*/
}
</style>

Part IV

Create links to the hidden layers like this:

<a href="#home" onClick="hideLayer('about');showLayer('contents');">Home</a> | <a href="#about" onClick="showLayer('about');hideLayer('contents');">About Me</a>

This ends the quick tutorial. You can be creative and mess around with it. The downside to using this code is, you can’t bookmark the hidden layers.

If you’re having trouble using this tutorial, or if you have any questions or comments, feel free to ask me for help.