Setting styles on individual Flex Accordion headers

Well, I played around with it briefly this evening and it seems that you can get individual accordion headings using the Accordion class’s getHeaderAt() method, then it is just a matter of saving that reference in a variable, or applying a style directly to the returned Button reference.

The example itself is pretty simple, but I’m sure the same principles apply to other styles as well

<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2007/10/30/setting-styles-on-individual-flex-accordion-headers/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="middle"
        backgroundColor ="white" >

     < mx:Style >
        AccordionHeader {
            fillColors: black, black;
            fillAlphas: 1, 1;
            textRollOverColor: white;
            textSelectedColor: white;
            themeColor: black;
        }
     </ mx:Style >

     < mx:Script >
         <![CDATA[
            private function init():void {
                accordion.getHeaderAt(0).setStyle("color", "red");
                accordion.getHeaderAt(1).setStyle("color", "haloOrange");
                accordion.getHeaderAt(2).setStyle("color", "yellow");
                accordion.getHeaderAt(3).setStyle("color", "haloGreen");
                accordion.getHeaderAt(4).setStyle("color", "haloBlue");
            }
         ]]>
     </ mx:Script >

     < mx:Accordion  id ="accordion"
            width ="300"
            height ="200"
            creationComplete ="init();" >
         < mx:VBox  label ="Red"   />
         < mx:VBox  label ="Orange"   />
         < mx:VBox  label ="Yellow"   />
         < mx:VBox  label ="Green"   />
         < mx:VBox  label ="Blue"   />
     </ mx:Accordion >

</ mx:Application >