How to Use the Show/Hide Behavior in Dreamweaver CS3

It is easy to show and hide web page elements if you know how to use Dreamweaver’s Show/Hide behavior.  In this tutorial I will show you how to show and hide two different elements.

First, you need to set up the links and and CSS IDs:

1. Create the links to show the elements.  Use “javascript:;” as the href (this gives you an empty link that can have Javascript attached to it).
2. Create CSS IDs for the elements you will show and hide.  Style them how you want, but set visibility to hidden if you want to hide them when the page loads.

#showOne {
	width: 250px;
	position: absolute;
	left: 250px;
	top: 72px;
	border: 1px dotted #CC0000;
	visibility: hidden;
}
#showTwo {
	width: 250px;
	position: absolute;
	left: 250px;
	top: 110px;
	border: 1px dotted #0033FF;
	visibility: hidden;
}

Next, create the div tags for the hidden elements.  You can create these divs by choosing Insert (menu) > Layout Objects > div tag.  Choose where you want the div tag to be placed, then choose the appropriate ID.

So your final HTML in the body tag should look like:

<a href="javascript:;">Use this link to show information 1</a>
<a href="javascript:;">Use this link to show information 2</a>
<div id="showOne">Content for  id "showOne" Goes Here</div>
<div id="showTwo">Content for  id "showTwo" Goes Here</div>

Now place your cursor in the first link, and select the plus (+) in the Behaviors panel then click on “Show-Hide Elements.”

Next, select the element(s) that you want to show and select the element(s) that you will hide; click OK. You may already have these elements hidden, but this allows for hiding when another hide/show link is clicked.

You should now have an OnClick event showing in the Behaviors panel when your cursor is in the first link.

Now repeat the previous steps with link #2. Just put your cursor in link #2, select Behaviors “Show-Hide Elements,” and set #showOne to hide and #showTwo to show. This is the opposite of the previous link.

Save your page, view it in your browser, click on the links and you should be seeing your hidden elements hiding and showing. Neat, huh?