The following example shows how you can set a separate icon on an Accordion header when the header is selected by looping over each header [...]]]> In a previous example, “Adding icons to a Flex Accordion control”, we saw how you could add embedded icons to a Flex Accordion container by setting the icon style.

The following example shows how you can set a separate icon on an Accordion header when the header is selected by looping over each header using the getHeaderAt() method and setting the selectedUpIcon, selectedOverIcon, and selectedDownIcon styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/16/adding-icons-to-a-flex-accordion-control-redux/ -->
<mx:Application name="Accordion_getHeaderAt_selectedUpIcon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Button;

            [Embed("assets/bullet_red.png")]
            private const RedIcon:Class;

            [Embed("assets/bullet_orange.png")]
            private const OrangeIcon:Class;

            [Embed("assets/bullet_yellow.png")]
            private const YellowIcon:Class;

            [Embed("assets/bullet_green.png")]
            private const GreenIcon:Class;

            [Embed("assets/bullet_blue.png")]
            private const BlueIcon:Class;

            [Embed("assets/bullet_star.png")]
            private const StarIcon:Class;

            private function init():void {
                var idx:uint;
                var len:uint = accordion.numChildren;
                var btn:Button;
                for (idx=0; idx<len; idx++) {
                    btn = accordion.getHeaderAt(idx);
                    btn.useHandCursor = true;
                    btn.buttonMode = true;
                    btn.setStyle("selectedUpIcon", StarIcon);
                    btn.setStyle("selectedOverIcon", StarIcon);
                    btn.setStyle("selectedDownIcon", StarIcon);
                }
            }
        ]]>
    </mx:Script>

    <mx:Accordion id="accordion"
            openDuration="0"
            width="100%"
            height="100%"
            creationComplete="init();">
        <mx:VBox id="redVbox"
                label="Red"
                icon="{RedIcon}" />
        <mx:VBox id="orangeVbox"
                label="Orange"
                icon="{OrangeIcon}" />
        <mx:VBox id="yellowVbox"
                label="Yellow"
                icon="{YellowIcon}" />
        <mx:VBox id="greenVbox"
                label="Green"
                icon="{GreenIcon}" />
        <mx:VBox id="blueVbox"
                label="Blue"
                icon="{BlueIcon}" />
    </mx:Accordion>

</mx:Application>

 

Full code after the jump.

View MXML