Hiding and showing elements to create a simple image gallery

- Hello friends, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson, I'll be showing you how to use Dreamweaver's Show-Hide Elements behavior to create a simple gallery of images from a set of stacked div containers. In Dreamweaver, hiding and showing layers refers to adjusting the visibility of a layer in the browser window using JavaScript. For instance, you can have a layer's visibility set to hidden when the page first loads in the browser.

Then, with the magic of JavaScript, you can make the layer visible when a visitor performs some action, such as clicking on a text link or an image. Hiding and showing layers can be really useful for a variety of reasons, including creating image galleries or showing tooltips, even revealing product details. Truly, you can use this interactive technique for any content, as a way to enhance your site visitor's experience. Let's take a look at the starting page code.

In this demonstration, I'll be showing you how to use Dreamweaver's Show-Hide Elements behavior to create a simple gallery of images from a set of stacked div containers. Here's an example of how it works. Let's take a look at the page code and see where I've added comments to make all the elements easier to identify. First there's a div with an id of "display." Inside this container, there's a line of text and then below that some nested divs.

One for a starter image that appears when the page is launched, and then one for each of the three Polaroid images I'd like to hide and show. And lastly there's one for the numbered text links, which will act like triggers that activate the Hide-Show behavior. As you can see, each div has its own id, and the numbered links use null links rather than URLs. Dreamweaver uses the ids in null links to call the behavior script. To add the Show-Hide Elements behavior, start by selecting link one in design view.

Next, select Window > Behaviors to open up your Behaviors panel. This is where you'll add the JavaScript that makes the Show-Hide Elements behavior functional. Click the "Add behavior" button on the Behaviors panel and choose "Show-hide elements" from the drop-down menu. When the Show-Hide Elements dialog box opens, you'll see a listing of all of the elements on the page with unique ids. Your job is to tell Dreamweaver which containers to hide and show when a visitor clicks this link.

Since we want the first Polaroid div to display when visitors click link one, we need to set the polaroid1 div to show. In addition, since we have no control over what order a visitor might click our links, we also need to make sure that the other Polaroid divs are hidden when someone clicks this first link. No need to add hide or show to the other containers in this list, because they aren't relevant to our task. Click the OK button and Dreamweaver will write the JavaScript into your file.

Notice in the Behaviors panel that Dreamweaver added the Show-Hide Elements behavior with the onClick event handler. If desired, we could change the event handler to any of the other listed options. However, to ensure that this effect is smartphone- and tablet-friendly, we'll leave ours set to onClick. Let's take a peek at our code again. Here we can see that there is now a script tag in the head and an onClick event handler that's been added to the text link.

Perfect! Let's continue adding the same behavior for links two and three. Set polaroid1 to hide, polaroid2 to show, and polaroid3 to hide. We'll repeat this process for link number three, setting polaroid1 and 2 to hide, and polaroid3 to show.

Save your file and test it in a browser. Looks good, works great! In addition to creating a gallery feature like this, there are many other uses for this behavior. For instance, you can use it for creating menus, hiding and showing location details, revealing color swatches or size charts, even accessing social media or share icons, and so much more! With a quick set-up, the Show-Hide Elements behavior is a simple yet elegant way to add interactivity to your webpages.