2007 March 29 | EverythingFlex

Accordion with Icons

March 29th, 2007

I built this component to allow an icon to be added to each Accordion Header where the icon is dependent on the current state of the Accordion. There are 3 possible states that are tracked, up, down, and selected. The upIcon is displayed whenever the pane is above the selected pane. The downIcon is displayed whenever the pane is below the selected pane. The selectedIcon is displayed when pane is the selected pane. See the image below.

Sample Syntax (Basic with default icons):

<eflex:AccordionIcons>
<mx:Canvas label=”Canvas”/>
<mx:VBox label=”VBox”/>
<mx:HBox label=”HBox”/>
</eflex:AccordionIcons>

Sample Syntax (Advanced with custom icons and selectedIndex):

<eflex:AccordionIcons
upIcon=”@Embed(source=’assets/icons/arrowUp2.gif’)”
downIcon=”@Embed(source=’assets/icons/arrowDown2.gif’)”
selectedIcon=”@Embed(source=’assets/icons/arrowSelected2.gif’)” height=”200″
selectedIndex=”1″>
<mx:Canvas label=”Canvas”/>
<mx:VBox label=”VBox”/>
<mx:HBox label=”HBox”/>
</eflex:AccordionIcons>