Flex Examples
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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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
Old blog post I know, but helpful for people finding it now:
Instead of setting individual setStyle for everything you want to change, create a style with a name and do the following.
accordian.getHeaderAt(0).setStyle(“styleName”,”yourStyleNameFromCSS”);
It’s what I want to know! Thanx! :-)
Ciao to everybody…
i have a problem with accordation header, i want use how header an image that is different from the others, one image for one voice of menu.
How i can customize this accordation menu? i will use horizontal Accordation.
Can we help me?
Ciao, grazieeee
@luigi russo,
I’d do something like the example above, except set the
skinstyle to an embedded image instead of thecolorstyle.Something similar to the following:
Peter
Accordion sorry for my english
Grazieeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee PETER
It works very well
Thanks Thanks thanks ciaooo
Hello Peter,
how are u?
I have a question: Can i use prettyphoto of jquery in flex?
prettyphoto is very nice, how i can use it in flex?
Grazie ciaooo
@luigi,
I’ve never used AJAX/jQuery/”prettyphoto”, but you could try using the ExternalInterface class to call some JavaScript from your Flex app. I think I had a comment/complaint earlier in my blog though about that approach not always working with AJAX though. But it may depend on your specific AJAX framework/implementation/code.
Apart from that, you may be able to create your own similar photo library in Flex using ActionScript 3.0 and the PopUpManager, and a custom Panel and other stuff.
You’d probably have better luck asking on a high volume mailing list like flexcoders and see what other people are using.
Peter
Hy,
I try to add a background image to headers but it doesn’t work… why please ?
Peter,
Is it possible to have different header heights for each of the header in an Accordion?
I tried this, it doesnt work :
Accordion.getHeaderAt(0).setStyle(“headerheight”, 75);
Any idea how we can do this?
Regards,
Praveen.G
I am having the same problem with header heights i can adjust the heights at run time by creating custom header renderer but i need to make the headers different size (match content) any ideas ??
Great post btw :-)
Is there a way to create a custom item renderer for the accordion label?
Say if I wanted a string as the label but different colors for different words in the label
like in black Goals: then if they are met have green text beside that or not met red text