Learn How to Create Accordion Displays of Web Content Using the Spry Accordion Widget.
Inserting a Spry Accordion
To illustrate how using the spry accordion widget works, first create a new HTML file in Dreamweaver CS3. Immediately save the file with a useful name. If you do not, you will get a prompt to save before inserting a Spry widget. After this, click “Insert,” “Spry,” and “Accordion.”
Spry automatically creates an accordion panel with two parts, including labels and content sections. Label 1, Content 1, and Label 2 appear with Content 2 hidden. Display this for editing by double-clicking on the symbol at the right of the Label 2. When you do this, Content 1 changes to hidden.
The last preliminary step before filling out the panels is to change each label to reflect what the accordion display will show. These labels are what the user clicks on to open or close the associated content. Change the actual title of the Spry accordion to something related to the actions. Do this by clicking on the default name, which appears above the first label and should like this: “Spry Accordion: Accordion1.” This opens a Properties window at the bottom of the screen where you can type a new name. For consistency, the image uses “Help” as a name. Add or delete additional panels by using the other property shown and rearrange them with the up and down arrows. For the example shown in the associated image here, the labels are “Introductory Information” and “Detailed Information."
If the Content1 panel is not showing, double-click the icon at the end of the Label1 line (now changed to “Introductory Information. Highlight the default content, which will read “Content 1” and insert the desired text. The introductory information from this article appears in the image as illustration. Repeat these steps to replace “Content 2” with your own text. The image uses part of this article for the second content, “Detailed Information.”
This completes the basic setup of a Spry accordion panel. Add more accordions as desired. Each time you add new accordions, the labels, if the originals were renamed, revert to Label 1, Content 1, and so forth.
.
Customizing the Accordion
There is a hotlink on the Properties page of the Accordion itself reading, “Customize this widget.” Contrary to what you might expect, this does not take you to specific options; rather, it displays the help pages describing various customizable operations. The CSS Styles section for the Accordion is where the actual changes take place. There are only three areas you can change: The text, the background and the width. To work with these, select one of the label or content areas, and click on “Window,” “CSS Styles” Locate the Accordion properties in the list of CSS Styles. By default, only the border bottom, left and right are set. However, there is a button labeled “Add property.” Clicking on this opens a wealth of ways to change the appearance of the Accordion. Individual image backgrounds—jpegs, gifs, color palettes are all available settings. Font sizes, styles, borders features, padding, and alignment are some of the typical changes users make to these panels.
The examples above are only a few of the many CSS options in Spry widgets. One nice change, not illustrated here, is to edit the color property of the AccordionPanelTabHover style so that the color changes when the Web visitor hovers over the Tab and the content is not open. However, it is better not to go overboard on these customization options at the risk of distracting the user.
.
This post is part of the series: Using Spry Widgets in Dreamweaver CS3 to Add Verstility to Your Web Design
Spry widgets can enhance otherwise drab displays as well as offer options that would otherwise require convoluted codind or in some cases not even be possible without using additional programs. This series describes how to use some of these widgets.
