Skip to Main Content

go to Indiana University Indiana University


Dreamweaver CS4: Show/Hide Behavior Is Not Just for Menus

In Dreamweaver CS4: Navigation, Templates & Media Integration, we discuss how to use Dreamweaver’s built-in behaviors to create drop-down menus for the main site navigation:

screenshot of website created in Dreamweaver CS4,showing main navigation drop-down menus

Screenshot of website created in Dreamweaver CS4, showing main navigation drop-down menus

Specifically, we use Show-Hide Elements to control when, and under what conditions, the navigation sub-menu should appear and disappear.  Show-Hide Elements is a fast and easy way to create drop-down menu items, but it can also be used, with a slight adaptation, to make pieces of content in the main part of a page appear and disappear based on the user’s behavior.  Read on to find out more…

The Use Case

Let’s say that you’re building a website where you need to display similar kinds of information about several related items:

  • a Visit Us page for a company or organization that has several locations
  • advertising a product that comes in several styles or colors

For the purposes of this post, let’s say we’re building a website for an artist and we’d like to show off a few of their works. The easiest solution is to create separate pages for each item. There are a few reasons why we might not want to do this, though:

  1. Its a little jarring for the user to go from page to page
  2. It can be difficult for the user to quickly compare different pieces
  3. It could be a lot of duplication for us (copying and pasting copyright information to each page featuring an artwork, for example)

And, as a matter of fact, our client the artist has stated very strongly that she wants her artist’s statement to appear above every piece of art featured on the site. That means if we create a unique page for each piece of artwork, we have to copy and paste her artist’s statement each time. And then when she changes her artist’s statement (since we all know how fickle artists are :-), we’ll have to remember to change the statement on all the artwork pages.

BUT, if we put all of her artworks on a single page, the page will be very long and its possible that viewers of the page won’t scroll all the way down to see all of the items.

The Solution

There’s a number of ways to solve this condundrum. Today, we’re going to repurpose the Dreamweaver behavior Show Hide Elements to allow the user to select which pieces of art they look at, based on their title.

Here’s where we’re at:

  1. We’ve already sketched out a site, including a Portfolio page.
  2. At the top of the portfolio page, we’ve  inserted the artist’s statement.

Here’s what our site and Portfolio page looks like so far:

Basic Portfolio page

Basic Portfolio page

Now what we want to do is add a sort of mini-nav below the artist’s statement, where each item in the mini-nav is a link to a particular artwork:

Basic page with artwork navigation added

Basic page with artwork navigation added

Instead of the link taking the end-user to another page, however, we want the artwork that the user clicked on to appear below the artist’s statement, like this:

User has clicked on one of the artwork titles

User has clicked on one of the artwork titles

The nice thing about this approach is that the user stays on the same page, and as they click on the various artwork titles, an image of the artwork and a description appears below.

Step-By-Step Instructions

Here’s what you’ll need to know before watching the following demonstration:

  1. Basic understanding of CSS (if you’ve taken Dreamweaver CS4: Creating Web Sites with CSS, you should be set)
  2. Basic understanding of Dreamweaver Behaviors (if you’ve taken Dreamweaver CS4: Navigation, Templates, and Multimedia Integration, you should be set)

Here’s what the tutorial video will cover:

  1. Manually adding <div>s and giving those <div>s names
  2. Adding content to <div>s
  3. Creating links to be used with Behaviors
  4. Adding the Show/Hide Behavior so that clicking a link will show certain <div>s and hide others
  5. Understanding the difference between CSS properties Visibility and Display
  6. Modifying the Dreamweaver javascript manually to achieve the effect we want

One other thing:

  1. Download the finished site (.zip format / 40MB)
And, finally, here’s the tutorial video:
Dreamweaver CS4: Using the Show/Hide Behavior to Control Content on the Page
(Flash movie – loads in a new browser window)

5 Responses to "Dreamweaver CS4: Show/Hide Behavior Is Not Just for Menus" to “Dreamweaver CS4: Show/Hide Behavior Is Not Just for Menus”

  1. Sikat ang Pinoy Says:

    Admiring the time and effort you put into your blog and detailed information you offer! I will bookmark your blog and have my friends also check up here often. Thumbs up!

  2. Dave Says:

    Must agree with Sikat, many of the posts on the blog are great, have been reading through for quite some time now :D

    Just laughed when i read “Its a little jarring for the user to go from page to page” a little jarring, just the same as a shark is a little deadly. A little of a lot, is plenty :D

  3. Amy Neymeyr Says:

    Ha! :-)

  4. Milady Says:

    Absolutely brilliant. Lifesaver in fact! I was searching for a method that could do this but needed to be reassured that it was an up to date method too. Beautifully explained too. I understand it all much better too, especially with the difference between the ‘hidden/visible’ and block behaviour. And neat twist at the end with the editing the javascript a bit. I haven’t ever touched the javascript before! Much more enlightening than just simply telling us what to do.

    I wondered if instead of adding a new behaviour to hide each element, whether it was possible to do it within the same dialog window (just going down the list and clicking ‘show/hide’ on each. I was surprised to find this worked before, when doing it with image rollovers).

    Also great to have a nice example to look at! Much appreciated.

    Thanks very much!

    Milady

  5. veronica mcintire Says:

    Actually I have to disagree. I think the implementation of many features in CS3 was much nicer. I know that everone has their own preferences when it comes to graphics and design on websites but Dreamweaver CS4 doesnt feel right as soon as you have to deal with larger websites.Loved reading your artivle though and the template is really nice :) Cheers.

Leave a Reply

 

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.