Customizing the Accordion header in Flex 3

The following example shows how you can set some of the deprecated styles in the Accordion container (such as fillAlphas, fillColors, and selectedFillColors) by using the headerStyleName style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/26/customizing-the-accordion-header-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Style>
        .accHeader {
            fillColors: haloSilver, haloBlue;
            fillAlphas: 1.0, 0.5;
            selectedFillColors: black, black;
        }
    </mx:Style>
 
    <mx:Accordion id="accordion"
            headerStyleName="accHeader"
            resizeToContent="true"
            width="100%">
        <mx:VBox label="Red"
                backgroundColor="red"
                width="100%"
                height="200" />
        <mx:VBox label="Orange"
                backgroundColor="haloOrange"
                width="100%"
                height="120" />
        <mx:VBox label="Yellow"
                backgroundColor="yellow"
                width="100%"
                height="160" />
        <mx:VBox label="Green"
                backgroundColor="haloGreen"
                width="100%"
                height="80" />
        <mx:VBox label="Blue"
                backgroundColor="haloBlue"
                width="100%"
                height="140" />
    </mx:Accordion>
 
</mx:Application>

View source is enabled in the following example.

25 thoughts on “Customizing the Accordion header in Flex 3

  1. Sorry for the lack of the SWF in today’s entry. Currently my LCD monitor at home is broken, and it is proving a bit difficult trying to type while staring at a 17″ CRT balanced on a phonebook on the floor. :)

    I’ll see if I can publish out a SWF and upload it tomorrow.

    Peter

  2. Your posts on Accordion headers are just what i needed…

    thanks peter.. your blog is the first place i come looking for Flex Examples…

  3. Hi,
    is it possible to colour individual headers of the accordion?

    Oh and by the way, some of the fonts on your website are a bit screwy in the searchcoders dashboard.

    cheers,

    Joc

  4. Hi Peter,

    I’ve been reading a lot about your posts and it has really helped me do my tasks and learn more about flex. I just would like to know why I’m getting the error everytime I click in to btn1.
    :
    “TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at test/::arr()
    at test/__btn1_click()

    Here’s the code.

    Your answer would really help a lot.

    Thanks,
    nold

  5. nold,

    You may have to try doing a search/replace with < to &lt;. Sorry. Posting code in these comments is pretty quirky.

    Peter

  6. Hi Peter,

    Sorry about that. I figured out the problem. I was able to learn that objects in Flex are not created until they are visible. I was doing som stuff with accordion and wondering why some objects are not changing.

    Anyway, thank you for replying. Rest assured I will be back for your help. :)

    nold

  7. Hey

    Thanks for showing us its really helpfull. One question though

    Is there a way to change the font colour of the selected heading in the css. such as a selectedColor or something? I can’t seem to find anything.

  8. david,

    I can’t find anything either. The closest I’ve gotten is the textSelectedColor style in the Button class (the Accordion headers subclass the Button control). But setting this style only affects the text color when the user presses the button, not the color of the label while the button is in the selected state.

    You could try filing an enhancement request at http://bugs.adobe.com/flex/

    Peter

  9. dilip,

    The following should work:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application name="Accordion_getHeaderAt_setStyle_color_test"
            xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="top"
            backgroundColor="white">
     
        <mx:Script>
            <![CDATA[
                import mx.controls.Button;
                import mx.events.FlexEvent;
                import mx.events.IndexChangedEvent;
     
                private function accordion_change(evt:IndexChangedEvent):void {
                    accordion.getHeaderAt(evt.oldIndex).setStyle("color", "black");
                    accordion.getHeaderAt(evt.newIndex).setStyle("color", "haloSilver");
                }
     
                private function accordion_creationComplete(evt:FlexEvent):void {
                    accordion.getHeaderAt(accordion.selectedIndex).setStyle("color", "haloSilver");
                }
            ]]>
        </mx:Script>
     
        <mx:Style>
            .accHeader {
                color: black;
                fillColors: haloSilver, haloSilver;
                fillAlphas: 1.0, 0.5;
                selectedFillColors: black, black;
            }
        </mx:Style>
     
        <mx:Accordion id="accordion"
                headerStyleName="accHeader"
                resizeToContent="true"
                width="100%"
                creationComplete="accordion_creationComplete(event);"
                change="accordion_change(event);">
            <mx:VBox label="Red"
                    backgroundColor="red"
                    width="100%"
                    height="200" />
            <mx:VBox label="Orange"
                    backgroundColor="haloOrange"
                    width="100%"
                    height="120" />
            <mx:VBox label="Yellow"
                    backgroundColor="yellow"
                    width="100%"
                    height="160" />
            <mx:VBox label="Green"
                    backgroundColor="haloGreen"
                    width="100%"
                    height="80" />
            <mx:VBox label="Blue"
                    backgroundColor="haloBlue"
                    width="100%"
                    height="140" />
        </mx:Accordion>
     
    </mx:Application>

    Peter

  10. hey there,

    im having an issue when applying styles to the accordion, the thing is that flex doesnt report any error but when i apply the style the application isnt loaded … and not just the accordion with the custom style…. when testing the app it doesnt show a thing…

    PD: im new to flex development so my knowledge to solve this things is kinda limited so thx in advance :) … oh, the style changes are showing up in design view, guess that means something

  11. hi, thanks for nice post, i was looking for.

    I want to change the each accordian header background color. I am trying to do with this code :

     accordion.getHeaderAt(0).setStyle("backgroundColor","red"); 
     accordion.getHeaderAt(1).setStyle("backgroundColor","green");

    or by defining in class

    accordion.getHeaderAt(0).setStyle("styleName","accordian1");
    accordion.getHeaderAt(1).setStyle("styleName","accordian2");

    with css code

    .accordian1{background-Color:green;}
    .accordian2{background-Color:red;}

    In both the cases each accordian header background color not changing.

    Any help on this or other way around to do this.

    1. @M. Sayeed,

      Try setting the fillColors style instead of the backgroundColor style, as seen in the following example:

      <?xml version="1.0" encoding="utf-8"?>
      <!-- http://blog.flexexamples.com/2007/10/30/setting-styles-on-individual-flex-accordion-headers/ -->
      <mx:Application name="Accordion_getHeaderAt_setStyle_fillColors_test"
              xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              verticalAlign="middle"
              backgroundColor="white">
       
          <mx:Script>
              <![CDATA[
                  private function init():void {
                      accordion.getHeaderAt(0).setStyle("fillColors", ["red", "red"]);
                      accordion.getHeaderAt(1).setStyle("fillColors", ["haloOrange", "haloOrange"]);
                      accordion.getHeaderAt(2).setStyle("fillColors", ["yellow", "yellow"]);
                      accordion.getHeaderAt(3).setStyle("fillColors", ["haloGreen", "haloGreen"]);
                      accordion.getHeaderAt(4).setStyle("fillColors", ["haloBlue", "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>

      Peter

  12. Hi Everyone,
    Its always nice to read Peter’s posts and I’ve always found some helpful stuff from here. Here I have a question. How do I detect what header was clicked by a user. Registering a click event in accordion’s tags triggers the event even if some item in the VBOX is clicked.

    Looking forward for prompt response…

    1. @Alex Fisherr,

      Try listening for the Accordion container’s change event, as seen in the following example:

      <?xml version="1.0" encoding="utf-8"?>
      <!-- http://blog.flexexamples.com/2007/10/26/customizing-the-accordion-header-in-flex-3/ -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              verticalAlign="top"
              backgroundColor="white">
       
          <mx:Script>
              <![CDATA[
                  import mx.controls.Alert;
                  import mx.events.IndexChangedEvent;
       
                  protected function accordion_change(evt:IndexChangedEvent):void {
                      Alert.show("You clicked the " + accordion.selectedChild.label + " tab!");
                  }
              ]]>
          </mx:Script>
       
          <mx:Accordion id="accordion"
                        resizeToContent="true"
                        width="100%"
                        change="accordion_change(event);">
              <mx:VBox label="Red"
                       backgroundColor="red"
                       width="100%"
                       height="200" />
              <mx:VBox label="Orange"
                       backgroundColor="haloOrange"
                       width="100%"
                       height="120" />
              <mx:VBox label="Yellow"
                       backgroundColor="yellow"
                       width="100%"
                       height="160" />
              <mx:VBox label="Green"
                       backgroundColor="haloGreen"
                       width="100%"
                       height="80" />
              <mx:VBox label="Blue"
                       backgroundColor="haloBlue"
                       width="100%"
                       height="140" />
          </mx:Accordion>
       
      </mx:Application>

      Peter

  13. Hi Peter,

    I would like to know that how can i add Icon in header.
    in that Icon can i give click Event and in the headerRenderer can i use custom component.

    thanks

Comments are closed.