Keeping on the subject of customizing the Accordion header, I was thinking that it would be nice to be able to change the appearance of a header that was selected. Out of the box, flex offers the style selectedFillColors so you can change the background colors of your header when its selected. This is nice, but, it doesn’t seem like enough. I wish it had a selectedHeaderStyleName or something like that.
To make a few minor changes to the header when its selected, I’m going to use the headerRender. I’ve never done much testing of the Accordion component, so, its all fairly new to me. I assumed the headerRender was similar to a List itemRenderer and that I could pretty much put anything in there and it would just work. That isn’t the case. Your custom headerRenderer pretty much needs to extend Button, otherwise, you’ll need to build in way too much logic on your own. So, here is my sample that changes the fontSize and color of a selected header. It also changes the paddingLeft of all the headers because I didn’t like the default.
And if you want to change up the icons for various states of your Accordion, then, try Rich Tretola’s Accordion With Icons component. It’s pretty cool and he’s got ASDocs for it as well.