Comments on: Customizing the Accordion header in Flex 3

By: Rajesh

Rajesh — Wed, 21 Dec 2011 14:17:24 +0000

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

By: Peter deHaan

Peter deHaan — Tue, 20 Oct 2009 14:34:48 +0000

@Alex Fisherr,

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

"1.0" encoding="utf-8"?>

 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    
        
            import mx.controls.Alert;
            import mx.events.IndexChangedEvent;
 
            protected function accordion_change(evt:IndexChangedEvent):void {
                Alert.show("You clicked the " + accordion.selectedChild.label + " tab!");
            }
        ]]>
    
 
     id="accordion"
                  resizeToContent="true"
                  width="100%"
                  change="accordion_change(event);">
         label="Red"
                 backgroundColor="red"
                 width="100%"
                 height="200" />
         label="Orange"
                 backgroundColor="haloOrange"
                 width="100%"
                 height="120" />
         label="Yellow"
                 backgroundColor="yellow"
                 width="100%"
                 height="160" />
         label="Green"
                 backgroundColor="haloGreen"
                 width="100%"
                 height="80" />
         label="Blue"
                 backgroundColor="haloBlue"
                 width="100%"
                 height="140" />
    >
 
>

Peter

By: Alex Fisherr

Alex Fisherr — Tue, 20 Oct 2009 08:58:16 +0000

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…

By: M. Sayeed

M. Sayeed — Mon, 05 Oct 2009 05:18:44 +0000

thnx a lot Peter, its working :)

By: Peter deHaan

Peter deHaan — Fri, 02 Oct 2009 13:59:15 +0000

@M. Sayeed,

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

"1.0" encoding="utf-8"?>

 name="Accordion_getHeaderAt_setStyle_fillColors_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    
        
            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"]);
            }
        ]]>
    
 
     id="accordion"
            width="300"
            height="200"
            creationComplete="init();">
         label="Red" />
         label="Orange" />
         label="Yellow" />
         label="Green" />
         label="Blue" />
    >
 
>

Peter

By: M. Sayeed

M. Sayeed — Fri, 02 Oct 2009 05:08:54 +0000

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.

By: Peter

Peter — Tue, 25 Aug 2009 21:37:02 +0000

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

By: Peter deHaan

Peter deHaan — Mon, 08 Jun 2009 14:17:42 +0000

dilip,

The following should work:

"1.0" encoding="utf-8"?>
 name="Accordion_getHeaderAt_setStyle_color_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    
        
            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");
            }
        ]]>
    
 
    >
        .accHeader {
            color: black;
            fillColors: haloSilver, haloSilver;
            fillAlphas: 1.0, 0.5;
            selectedFillColors: black, black;
        }
    >
 
     id="accordion"
            headerStyleName="accHeader"
            resizeToContent="true"
            width="100%"
            creationComplete="accordion_creationComplete(event);"
            change="accordion_change(event);">
         label="Red"
                backgroundColor="red"
                width="100%"
                height="200" />
         label="Orange"
                backgroundColor="haloOrange"
                width="100%"
                height="120" />
         label="Yellow"
                backgroundColor="yellow"
                width="100%"
                height="160" />
         label="Green"
                backgroundColor="haloGreen"
                width="100%"
                height="80" />
         label="Blue"
                backgroundColor="haloBlue"
                width="100%"
                height="140" />
    >
 
>

Peter

By: matthew

matthew — Mon, 08 Jun 2009 12:49:29 +0000

dilip: rtfm
it’s all there

By: ryan sun

ryan sun — Mon, 27 Apr 2009 20:39:43 +0000

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