Customizing the Accordion header in Flex 3

25 Responses to Customizing the Accordion header in Flex 3

1. peterd says:

   October 26, 2007 at 11:32 pm

   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

   Reply
2. Ted says:

   October 27, 2007 at 2:09 am

   Your posts on Accordion headers are just what i needed…

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

   Reply
3. Joc says:

   October 27, 2007 at 3:34 am

   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

   Reply
4. Madhusudhan says:

   October 30, 2007 at 5:27 am

   Hey Peter,

   Is it possible to color individual headers of the accordion?

   Cheers,
   Madhu

   Reply
5. peterd says:

   October 30, 2007 at 11:40 pm

   Madhu,

   I believe you can, yes. For example, I can set different label colors for each accordion heading by using the following snippet:

   accordion.getHeaderAt(0).setStyle("color", "red");

   For more information, see “Setting styles on individual Flex Accordion headers”.

   Peter

   Reply
6. nold says:

   April 2, 2008 at 5:44 pm

   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

   Reply
7. peterd says:

   April 2, 2008 at 6:13 pm

   nold,

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

   Peter

   Reply
8. nold says:

   April 7, 2008 at 3:49 pm

   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

   Reply
9. Posin says:

   April 11, 2008 at 4:47 pm

   Nice example, what other CSS changes we can do?

   Reply
10. vik says:

    July 14, 2008 at 6:31 am

    hie

    is it possible to show collapsed all the accordian headers in the begining.?

    Reply
11. Anonymous says:

    September 18, 2008 at 10:05 pm

    good, i have saved it in my google notebook.

    Reply
12. david says:

    October 13, 2008 at 8:47 pm

    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.

    Reply
13. peterd says:

    October 15, 2008 at 8:38 am

    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

    Reply
14. danny says:

    January 10, 2009 at 12:50 am

    Hi Peter,

    Thanks for your help!!!

    Is possible create corner radius to accordion tabs?

    DannyDAS!!!

    Reply
15. dilip says:

    February 24, 2009 at 3:34 am

    Hi Peter,

    I would like to know that how can i change the selected header text color?
    thanks

    Reply
16. ryan sun says:

    April 27, 2009 at 1:39 pm

    http://forums.adobe.com/thread/425201
    way to set selected header text color

    Reply
17. matthew says:

    June 8, 2009 at 5:49 am

    dilip: rtfm
    it’s all there

    Reply
18. Peter deHaan says:

    June 8, 2009 at 7:17 am

    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

    Reply
19. Peter says:

    August 25, 2009 at 2:37 pm

    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

    Reply
20. M. Sayeed says:

    October 1, 2009 at 10:08 pm

    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.

    Reply
    • Peter deHaan says:

      October 2, 2009 at 6:59 am

      @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

      Reply
      • M. Sayeed says:

        October 4, 2009 at 10:18 pm

        thnx a lot Peter, its working :)
21. Alex Fisherr says:

    October 20, 2009 at 1:58 am

    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…

    Reply
    • Peter deHaan says:

      October 20, 2009 at 7:34 am

      @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

      Reply
22. Rajesh says:

    December 21, 2011 at 6:17 am

    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

    Reply