[Developer]

Show/Hide Layers

Introduction: In this tutorial I will explain how to create the show/hide menu shown. If you would like to see a live demonstration click here. To create this tutorial I used Dreamweaver 8, and added the show/hide behavior which is built into Dreamweaver. It is a simple process that gives you a nice effect.
Click here to see a live example.

Part1: Setting up Dreamweaver.
Open Dreamweaver, create a new page, Basic page Html. Copy the code below and paste it into Dreamweaver. This is the code for the table, you don't necessarily need the table but its good because it organize it a little.

Your browser does not support inline frames or is currently configured not to display inline frames.

With the code pasted into Dreamweaver Code view you should have the table shown below.

Next add the numbers 1 and 2 into the two small square boxes as shown below.

Double click on the number "1" text to highlight it, when you do that the properties panel should show up at the bottom of the window. You should see the Link bar shown below, type in the # symbol. Repeat this for the second number.

Click outside the table, Next click on Insert Layout Objects Layers

When you do that the layer below will come up.

With the layer selected, change the Layer ID to "layer1"

Next change the layer Vis to Hidden

Next position the layer as shown below.

With the layer selected, Type something into the layer as shown below.

Repeat this step for the second number 2
Double click on the number "2" text to highlight it, when you do that the properties panel should show up at the bottom of the window. You should see the Link bar shown below, type in the # symbol. Repeat this for the second number.

Click outside the table, Next click on Insert Layout Objects Layers

When you do that the layer below will come up.

With the layer selected, change the Layer ID to "layer2"

Next change the layer Vis to Hidden

Next position the layer as shown below.

With the layer selected, Type something into the layer as shown below.

Next click on Windows behaviors, the behaviors tab have to be checked. With that the behaviors tab should come.

Click on the number "1" to select it. Click on the (plus +) icon and click on Show-Hide Layers with that hide and show the layers as shown below.

Click on the number "2" to select it. Click on the (plus +) icon and click on Show-Hide Layers with that hide and show the layers as shown below.