Customizing the Accordion header in Flex 3

by Peter deHaan on October 26, 2007

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.

Tagged as: fillAlphas, fillColors, headerStyleName, resizeToContent, selectedFillColors

{ 24 comments… read them below or add one }

1 peterd 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

2 Ted 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…

3 Joc 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

4 Madhusudhan October 30, 2007 at 5:27 am

Hey Peter,

Is it possible to color individual headers of the accordion?

Cheers,
Madhu

5 peterd 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

6 nold 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

7 peterd April 2, 2008 at 6:13 pm

nold,

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

Peter

8 nold 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

9 Posin April 11, 2008 at 4:47 pm

Nice example, what other CSS changes we can do?

10 vik July 14, 2008 at 6:31 am

hie

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

11 Anonymous September 18, 2008 at 10:05 pm

good, i have saved it in my google notebook.

12 david 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.

13 peterd 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

14 danny January 10, 2009 at 12:50 am

Hi Peter,

Thanks for your help!!!

Is possible create corner radius to accordion tabs?

DannyDAS!!!

15 dilip 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

16 ryan sun April 27, 2009 at 1:39 pm

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

17 matthew June 8, 2009 at 5:49 am

dilip: rtfm
it’s all there

18 Peter deHaan 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

19 Peter 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

20 M. Sayeed 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.

21 Peter deHaan 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

22 M. Sayeed October 4, 2009 at 10:18 pm: thnx a lot Peter, its working :)

23 Alex Fisherr 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…

24 Peter deHaan 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

Customizing the Accordion header in Flex 3

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

Customizing the Accordion header in Flex 3

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising