Recently at work I was looking for an actionscript accordion which was easy to customize. The goal was to create a accordion for navigation purposes. I could not find anything usefull, but fixed size accordions. I needed to create one myself.

Download the sourcefiles accordionlist.zip and accordionlistscroll.zip

I will explain the code shortly. Perhaps it will be usefull for somebody and safe some time. I have left the styling basic just to show the working and principle to make is easier to be customized. The visual part of the accordion is made in flash to make it easy to add mouseOver etc.

Accordion List

I have tried to keep the accordion principle in the main class, so that the main class could act as the director. The accordion header communicates with the main class through an custom event. An in the end it might be necessary to add an custom event to the menu items, for example to retrieve some other data through an remote call, or to switch to another page.

After this accordion I realised that the main advantage for an accordion is the possibillity to display an unknown number of items and subitems in a small place. So I decided to ad a scrollbar to supply this advantage to the accordion.

To make the scrollbar work properly I needed to add all the AccordionList as well as the Scrollbar to a seperate containerclass ( AccordionListContainer ). The next step was to update the scrollBar roperties with the setScrollProperties when the user clicks on one of the headers.

The result is a flexible accordion list class, which can be used to display anything from links to images. Since the class loads symbols it should be easy to style it to your own preferences. And of course remove my hard coded item height values.