Spry Accordion

The Spry Accordian is another simple Spry widget much like the Tabbed Panel. The main difference between and Accordian and a Tabbed panel is that the Tabs for an accordian are arranged vertically while a Tabbed Panel is horizontally arranged. What this means is that the HTML is ordered a little differently. In the tabbed panel you have two groups on to create the tabs and then another to create the tab content. With an Accordian you create the tab and immediately afterwards you define the content.

The Spry Accordian Panel has a lot of default values when starting out to provide you with maximum functionality with little code. By default each panel is the same height, the transition effect is turned on, and the first tab is opened. All of these defaults can be overriden by passing certain arguments to the contructor function.

What You Need

For a Spry Accordian you need the SpryAccordian.js, and SpryEffects.js file and the associated CSS SpryAccordian.css. The SpryEffects library file is needed in order to give the Accordian tabs their smooth sliding transition from open to close. Without the SpryEffects the tabs would snap open and closed immediately and quite frankly doesn't look as nice.

The Javascript

Another one liner here with the javascript. Like the TabbedPanel you pass in the ID of your Accordian Panel DIV and Spry does the rest.

The HTML

The HTML markup for the Accordian should remind you somewhat of the markup for a TabbedPanel, with the exception of course that every CSS class starts with the word AccordianPanel instead of TabbedPanels, but the idea here is the same. Like the TabbedPanel we set the tabindex of the Spry AccordianPanel's DIV in order to provide keyboard accessibility, unlike the TabbedPanel we only need to do it on the outermost DIV and not on every tab DIV.

The Result