Dreamweaver - Spry Accordion Part One

An Accordion 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.

Accordion panels provide a way to use a small piece of web page real estate to contain several "panels" that the user moves between. You can put images, text and other content on the panels. This image shows a default accordion panel before customization. Click on the grey 'headers' and see the panel expand like an...accordion!

1. Place the cursor on your document in the position where you want to insert the accordion panels. Click the Accordion Panel icon in the Spry category on the Insert bar. (Spry icons are identified by the orange 'star' in the bottom-right of each icon).

2. The Spry widget will open on the page. When the Spry object appears, there are two labels and one content area visible. The lables are simply named Label 1 and Lable 2. The content area is numbered to match the corresponding label. See the image above Step 1.

3. When the blue outline highlighting the Spry object is present in the document window (which is seen when the blue tab at the top-left of the Spry accordion panel is clicked - see image to left), you can use the Property Inspector to customize the widget. Here you insert or remove accordion panels and change the order of the panels.

To add or remove panels, click on the + or - icons. To re-order the panels, select the appropriate panel and click on the 'up' and 'down' arrows.  The Accordion Panel can also be named here in case you add more than one Accordion to your site and it can be easily identified for future modification.

If you try to save the page or preview it in a browser, you will see this message:

When you insert Spry objects, a folder called Spry Assets is automatically added to the root folder of your web site. As you can see, this folder contains both CSS (for the styling) and JavaScript code (for the animation).

Here's a simple 3-panel Spry Accordion:

If you haven't opened up each panel and read the oh-so-interesting dummy text and the odd image we've started off with, read Part Two to see how to make things more interesting.  Some knowledge of CSS needed, though...