X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
Adding and Editing Spry Accordions Using CSS in Dreamweaver

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.


David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link