Loyal reader, Madhu, asked the following question the other day:
Is it possible to color individual headers of the accordion?
Well, I played around with it briefly this evening and it seems that you can get individual accordion headings using the Accordion class’s getHeaderAt() method, then it is just a matter of saving that reference in a variable, or applying a style directly to the returned Button reference.
The example itself is pretty simple, but I’m sure the same principles apply to other styles as well.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/30/setting-styles-on-individual-flex-accordion-headers/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
AccordionHeader {
fillColors: black, black;
fillAlphas: 1, 1;
textRollOverColor: white;
textSelectedColor: white;
themeColor: black;
}
</mx:Style>
<mx:Script>
<![CDATA[
private function init():void {
accordion.getHeaderAt(0).setStyle("color", "red");
accordion.getHeaderAt(1).setStyle("color", "haloOrange");
accordion.getHeaderAt(2).setStyle("color", "yellow");
accordion.getHeaderAt(3).setStyle("color", "haloGreen");
accordion.getHeaderAt(4).setStyle("color", "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>
View source is enabled in the following example.
Hello,
Is it possible to do the same thing with children instead of headers in the accordion ?
Thanx
Hi,
The children (VBox) can be styled with their own styles.
.box1Style { backgroundColor: #ff0000; }Hi. I have a question. Is it posible that when you click on a header already open it closes? And to all the headers appear closed in the initial state?
Thanks, sorry about my english ^^u
I have the same question as GuitarWorker. I’ve used Scriptaculous for this purpose: click on a header the accordion expands, click on the same header the accordion contracts. I’m brand-spanking new to FLEX and want to learn how to do this type of work. Any help on this matter would be most appreciated!! Also, as GuitarWorker mentioned, how do you code for the headers to be closed on page load? Thank you!
P.S. Your efforts are well received and appreciated. It is great to have someone leading the way with examples.
Nice Example. I have found lots of great stuff on your site.
Thanks so much for this example… i too keep finding great examples here on this site!
Hmmm…I escaped my code, but it still seems to not have displayed:
I want to change the header button colors on an Accordion inside of a Repeater and when I try to do the “getHeaderAt” it just returns null. You can see the code at:
http://docs.google.com/Doc?id=dc2gtjz3_16hbx4rfgj
By the way, your blog is saving my life! I just started with Flex two days ago for a company project and your examples have been hugely helpful! Thanks so much!
.:Joshua