• Nov 13, 2011

• Adding and Editing Spry Accordions Using CSS in Dreamweaver

• by David Smith in Dreamweaver

• Genre: Web
• Level: Intermediate/Advanced
• Time to Complete: 5-15 minutes
• 0 comments — Start Discussion

Spry Accordions are a delightful way in which to deliver large amounts of information in a confined space. They are also a  lot of fun for users if you use them in a clever way. If anyone has used Adobe's new HTML5 software (code named "Muse") you will have seen that Spry Accordions play a big part in that application also. In this article I'm going to show you how to add a Spry Accordion to your web page and then use Cascading Style Sheets to edit how it looks.

Step 1 - Create an AP DIV

I like to control the position of a Spry by placing it inside an AP DIV. To create an AP Div go to the Insert Panel and choose Layout > Draw AP Div. 

AP Div Draw

Use the Cursor to draw a box on the page. The blue box that appears is your AP Div. 

Step 2 - Position and Size the AP Div

To Move the AP Div (which is just a DIV Tag that has some CSS controlling its formatting) grab the small white handle at its top left and drag its interposition to your page. 

Resize AP DiV

To resize the AP Div you could grab one of its blue anchor points and drag to the desired size.  

Step 3 - Inset a Spry Accordion

Click inside the AP Div to activate the cursor inside, then from the Insert Panel choose Layout > Spry Accordion. 

Spry inserted

A Spry Accordion appears inside the AP Div that you drew. 

Step 4 - Add More Panels

The Spry Accordion uses panels to allow users to reveal or conceal its content in a movement similar to an accordion, hence the name. I'm adding some more. 

With the Spry Accordion selected (which you can do by clicking on the Cyan-colored Spry Accordion label). Use the Properties Panel to add more labels.

Labels in properties

Use the + button to add 2 more Panels so you see this:

More labels added to spry

Step 5 - Edit the Contents of the Spry

When you hover the cursor over each Label Tab on the Spry Accordion, a little eye symbol will appear. Clicking on this symbol will open the contents of that particular Tab enabling you to edit it. 

Eye and contents

Highlighting the text of the Label allows you to change the label's name. Highlighting the text "Contents" allows you to edit the text contained inside the Spry. 

Tip: copy and paste large amounts of text in here.

Filled Spry

Repeat this until you have content and names for each label. 

To see how the Spry Accordion operates, switch on Live View and click on each Panels Tab in turn. Nice, right?

Live View Button

Keep the Live View active from here on so you can monitor the changes you're making.

Step 6 - Edit the style of the Panel Tabs

Have a look at the CSS Styles Panel, you will see a Style Sheet named SpryAccordion.css:

Spry CSS

Click on the Arrow to reveal the contents of the Style Sheet and you will see a list of Compound Class styles, all of which control individual aspects of how the Spry Accordion looks. Select the Style named .AccordionPanelTab. 

Panel Tab Style

You will see from the CSS Properties that the default Background color is #CCCCCC. Change this text to read #00CC66 (Tip: this can be shortened to #0C6)

Green tabs

The Panels will change to Green. To create a highlight on the tab as you roll over select

.AccordionPanelOpen and .AccordionPanelTab and set the Background Color to #0F9.

Step 7 - Edit the Style of the Focused Tabs

Try clicking on the Panel Tabs and you'll see they turn blue. This is because the CSS controlling the Focused properties are set to blue: 

Blue Spry

To change them do the following in the CSS:

To create a highlight for the tab that is open:

• Select .AccordionFocused, .AccordionPanelOpen and .AccordionPanelTab and set their background color to #9FC
  

To make sure that any closed panels while the Spry Accordion is active are the same green as the closed panels when the Spry Accordion is not active: 

• Select .AccordionFocused and .AccordionPanelTab and set their background color to #0C6
  

Finished Spry

You could continue to add or modify parameters on any and all Class Styles on the SpryAccordion.css style sheet however you wish, as the principles are the same. Go ahead and try adding color to the text, or changing the font, etc. until you create a style that suits you.