Creating an Accordion with Dreamweaver CS3's Spry Widgets

Now that you have seen what an accordion looks like - lets build one!

Step 1: Add the Spry Accordion Widget to the page

Place your cursor where you wish to insert the Spry Accordion Widget. Then select the Spry Accordion Widget from the Spry frame of the insert bar.

Once you have clicked on the Spry Accordion Icon Dreamweaver CS3 will automatically add the widget using some default attributes.

By default the Spry Accordion fills the available width and has a 1 pixel border and 0 padding and 0 margin. The attributes of the Spry Widget are determined by a bunch of CSS styles that are added to the page - which we can alter to customize the look of our Spry Accordion

Step 2: Adding Panes to the Accordion

By default the Spry Widget contains only 2 panes. To add more content panes select the Spry Accordion Widget - then from the Property Inspector click the plus button above the panes list. To change the order select the pane you wish to move and use the up down buttons above the panel display on the Property Inspector to change the order.

Step 3: Adding Content

To change the text of a label,. block the text of the label by clicking and dragging - then simply type what you want the label to say. Adding content to the content panes is almost as easy - except that only one panel shows by default. To show a particular content pane mouse over the label tab associated with the content pane you want. You will see an eye symbol appear - click on it to show the content pane for that label. Once you can see the content pane you can add content to that pane just as you would to any other div or table cell.

Step 4: Customizing the Accordion

You will have noticed from the previous step that the only thing you can change on a Spry Accordion Widget from the Property Inspector is the number and position of the panes it contains. Well you could also change the name of the spry widget but.... for changing the look of it no such luck. That is because all other attributes are controlled by CSS. Dreamweaver inserts a bunch of CSS rules into your document to control the appearance and behaviour of the Spry Accordion This tutorial will walk you through a couple of basic tasks you may wish to perform on your Spry Accordion

Specify the width of the Accordion

Open your CSS styles palette (if it isn't already) and expand the SpryAccordion.css so you can see the various rules. Then select the Accordion rule. The Accordion rule is the parent rule for the Accordion widget and attributes that will affect all parts of the Accordion can be set within this rule. In the properties section of the CSS styles palette select "Add Property". In the resulting window type width and specify a value such as 400 pixels. Your entire accordion will be constrained to 400 pixels wide.

Style the text within the Spry Accordion

The trick to styling the text within a Spry accordion is to know which rule affects which text. Change the Accordion rule if you want the type to be styled in both the label and content areas. Style the .AccordionPanelTab to style the Label and .AccordionPanelContent to style the text in the content pane.

In this example we will make the label text Arial, Bold and change the colour. Right click on the .AccordianPanelTab rule and choose edit from the resulting context menu to open the Edit dialog box.

From the type panel on the CSS Rule Dialog Box choose Arial for the font, Bold for the weight and a specify a colour.

To add some space between the edge of the tab and the text lets alter the padding. Select the Box category from the rule definition dialog box and uncheck the same for all checkbox above the padding option. Replace the 2 currently found in the left padding text box with 10 and select Ok.

To format the text with the content panes we will edit the .AccordianPanelContent rule. Right click on .AccordianPanelContent and select edit from the resulting context menu. First choose the Type category, specify Arial for the font, 12 pixels for the font size and 1.4 ems for the line height. From the box category uncheck the same for all for the padding and enter the values right 4, and left 10. Tip: You can not alter the bottom or top padding of the content pane without causing an unsightly space to appear between panes when they are closed.