Join Sue Jenkins for an in-depth discussion in this video Hiding and showing elements to create a simple image gallery, part of Productivity Tips for Web Designers.
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.
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.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.