One of the most anticipated features in Adobe's Dreamweaver CS3 has got to be the full integration of the Spry javascript library. Now without having to know any javascript at all one can create tabbed menu bars, fly-out menu's and in the case of this tutorial an accordion all by using Dreamweaver's built in Spry Widgets. Look Ma - no hands!

What is an accordion you ask? An Accordion widget is a set of collapsible panels that can store a large amount of content in a compact space. Site visitors hide or reveal the content stored in the accordion by clicking the tab of the panel. The panels of the accordion expand or contract accordingly as the visitor clicks different tabs. In an accordion, only one content panel is open and visible at a given time.

Label for Content Area 1

Content 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Label for Content Area 2

Content 2

Label for Content Area 3

Content 3

This is a live example of an accordion effect. Dreamweaver's Spry widgets add some nice animation effects and colour changes so the viewer knows which panel is active. Try it out to see how it functions. Click on the labels for the other content areas to see the panels collapse and expand.

Creating an Accordion with Dreamweaver CS3's Spry Widgets

Content 1

Content 2

Content 3