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.
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.
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.
Click inside the AP Div to activate the cursor inside, then from the Insert Panel choose Layout > Spry Accordion.
A Spry Accordion appears inside the AP Div that you drew.
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
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.
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.
Have a look at the CSS Styles Panel, you will see a Style Sheet named SpryAccordion.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)
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.
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:
To change them do the following in the CSS:
To create a highlight for the tab that is open:
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:
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.