Setting styles on individual Flex Accordion headers

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.

View MXML

<?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.

19 thoughts on “Setting styles on individual Flex Accordion headers

  1. 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

  2. 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.

  3. 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

  4. 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”);

  5. 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

    1. @luigi russo,

      I’d do something like the example above, except set the skin style to an embedded image instead of the color style.
      Something similar to the following:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       
          <mx:Script>
              <![CDATA[
                  [Embed("flash_player_10_appicon-tn.gif")]
                  private static const flPlIcon:Class;
       
                  [Embed("fx_appicon-tn.gif")]
                  private static const fxIcon:Class;
       
                  private function init():void {
                      acc.getHeaderAt(0).setStyle("skin", flPlIcon);
                      acc.getHeaderAt(1).setStyle("skin", fxIcon);
                  }
              ]]>
          </mx:Script>
       
          <mx:Accordion id="acc" headerHeight="20" width="400" height="300" creationComplete="init();">
              <mx:VBox label="Flash Player" width="100%" height="100%">
                  <mx:Label text="Adobe Flash Player 10" />
              </mx:VBox>
              <mx:VBox label="Flex" width="100%" height="100%">
                  <mx:Label text="Adobe Flex" />
              </mx:VBox>
          </mx:Accordion>
       
      </mx:Application>

      Peter

    1. @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

  6. 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

  7. 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 :-)

  8. 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

Comments are closed.