Customizing the Accordion header in Flex 3 at Flex Examples

Oct

Customizing the Accordion header in Flex 3

By Peter deHaan

Categories: Accordion Tags: Accordion, fillAlphas, fillColors, headerStyleName, resizeToContent, selectedFillColors.

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.

View MXML

<?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.

18 Responses to “Customizing the Accordion header in Flex 3”

Feed for this Entry View blog reactions

1 peterd Oct 26th, 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 Oct 27th, 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 Oct 27th, 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 Oct 30th, 2007 at 5:27 am

Hey Peter,

Is it possible to color individual headers of the accordion?

Cheers,
Madhu
5 peterd Oct 30th, 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 Apr 2nd, 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 Apr 2nd, 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 Apr 7th, 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 Apr 11th, 2008 at 4:47 pm

Nice example, what other CSS changes we can do?
10 vik Jul 14th, 2008 at 6:31 am

hie

is it possible to show collapsed all the accordian headers in the begining.?
11 Anonymous Sep 18th, 2008 at 10:05 pm

good, i have saved it in my google notebook.
12 david Oct 13th, 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 Oct 15th, 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 Jan 10th, 2009 at 12:50 am

Hi Peter,

Thanks for your help!!!

Is possible create corner radius to accordion tabs?

DannyDAS!!!
15 dilip Feb 24th, 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 Apr 27th, 2009 at 1:39 pm

http://forums.adobe.com/thread/425201
way to set selected header text color
17 matthew Jun 8th, 2009 at 5:49 am

dilip: rtfm
it’s all there

18 Peter deHaan Jun 8th, 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>