All Articles Dreamweaver
Adding and Editing Spry Accordions Using CSS in Dreamweaver
David Smith on Sun, November 13th | 0 comments
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. David Smith shows how.

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

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. 

Re-size AP DiV

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

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

Labels in properties


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

More labels added to spry

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

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

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

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

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

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

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

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

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.


Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: