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.
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
Your posts on Accordion headers are just what i needed…
thanks peter.. your blog is the first place i come looking for Flex Examples…
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
Hey Peter,
Is it possible to color individual headers of the accordion?
Cheers,
Madhu
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
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
nold,
You may have to try doing a search/replace with < to <. Sorry. Posting code in these comments is pretty quirky.
Peter
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
Nice example, what other CSS changes we can do?
hie
is it possible to show collapsed all the accordian headers in the begining.?