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.