Here’s a SuperAccordian. What makes it so super I hear you ask??

1. It lets you select more than one index at at time. Clicking on a deselected child’s header selects it and click on a selected child’s header deselects it, unless it is the only remaining selected child.

2. It lets you use a ViewStack as a child, splitting the Accordian’s header using the children in the ViewStack (like a TabNavigator).

I’d be ineterested to know if anyone uses it, or there’s any bugs, improvements etc.


The source for the component is in our Google Code Library.

33 Responses to “SuperAccordian”

  1. just found an issue:
    history doesn’t work. as the back button is pressed the accordion goes always back to “1″.

    however, this component really rocks :)

  2. Tiago Dias says:

    wow, interesting component, I might even use it for some internal work..
    I’ll let you know when I have something to show.

  3. Tink says:

    Good stuff :)

    I’ll take a look at the history.

  4. Doug McCune says:

    One thing people often ask for is an accordion that can have all panes closed at once. Think you can throw that in?

  5. not sure if the typo is worth a refactor:

  6. Hey Tink, this would be cool to use as a tools palette, like those that appear in the Flash IDE, and I have just the project for it. Thanks ;)

  7. Grant Davies just asked me to ask you *roll* to check that, if you have two of these in a component, with each one on a seperate view state (one hidden), then if you re-activate on a viewstate change, does it try to re-select the last open accordion? Apparently this is a common accordion issue, which often causes them to fall over.

    I dunno why he couldn’t ask you himself ;)

  8. Fantastic work!

    Many great uses for this component! I am sure you will see your component on a bunch of Flex apps now. I do agree with Doug though, it should have a collapse all method.

  9. Ed Syrett says:

    I tried the example, and it prompted me to install Flash Player 10… is that right?

    In any case I couldn’t upgrade anyway as we’re targeting 9.x so I have to keep my browsers at a fixed version.

    BTW what version of Flex Builder are you on that targets Flash Player 10?

  10. Tink says:

    @Ed, runs fine in MAC 9,0,124,0.
    History stuff is now fixed. I’ve also replaced any reference to ‘indexes’ to ‘indices’, including replacing the event IndexesChangedEvent with IndicesChangeEvent.

    @Doug & Stephen
    I’ll a collapse feature that will be turned off disabled by default, and a property so you can set it to collapse to the top or bottom.

    @ Lee
    I’m not quite cure I understand what you mean. Do you think you could knock up a quick example with Accordian’s, might even be able to address the issue on them.

  11. I’ll try to knock one up this evening :)

  12. Gareth Arch says:

    I’m getting the same “Flash player 10 is required to access this content”. I have the debug version of Flash 9,0,124,0

  13. Gareth Arch says:

    Weird…It wouldn’t work in Firefox, but would in IE.

  14. @All with Flash 10 issue : It’s embedded for Flash 9,0,124,0 at least according to the HTML in the page. Tink, did you export it from Flash CS4?

    @Tink : I’ll have to see if I can whip up that example in the morning. I’ve got shed loads of stuff going on, and I just can’t find the time.

  15. jim says:

    Hey Tink, great component! I do get one error though. When I instantiate a SuperAccordian it immediately gives me an error (type not found… “SuperAccordianHeader”). Any advice on what I’m going wrong?

  16. matt says:

    @jim/ tink
    You need to change the name of the folder that the SuperAccordionHeader is living in. It is still Accordian with an ‘a’ where it should be an ‘o’.

  17. ray gomez says:

    thanks for a wonderful component. I just have a question. Is it possible that instead of dividing the whole height evenly between opened children, the height of a section is determined by the height of container inside of it? thanks a million

  18. Tink says:

    Hi Ray

    It’s definitely feasible that this could be done.

    You’d have to think about what you’d want it to look like with only one open (i.e. would the whole accordion be smaller, the height of the open child + the headers)?

  19. Sundance says:

    Hi! i can’t foud the source in google code, nice work anyway!

  20. Sara says:

    I have added 4 childs in the control. 3 of the childs in the component will have a fixed height, the remaining one in which the grid is placed needs to have a flexible heigh. The requirement is child with grid should occupy the space when any of the 3 sections are closed. How do i achieve this fucntionality.

  21. Tink says:

    Currently the SuperAccordian will not let you close an item if its the only one open. You’d have write some code that allows the user to close any item (except the one with the grid), and open the child with the grid.

    Give me a shout if you want me to do this at a charge.

  22. Steff says:

    I am trying to use icons in the headers of the component but have run into an issue.

    The firstButtonStyleName / lastButtonStyleName properties does not seem to work. When I assign a style to firstButtonStyleName, then that style will be set on all headers, and the lastButtonStyleName property seemes not to work at all.
    Result: all the children has the same icon. Do you have any suggestions to how I could solve this?

  23. Ronak says:


    Thanks for such a great component. I’m trying to make an Accordion where I have a Horizontal Accordion with two components and a vertical accordion in one of those two inner components.

    (This simulates a group of smaller windows that can be hidden and shown.

    I was wondering how I could use your Super Accordion to do that.

    • Tink says:

      I Ronak

      I’m not sure this component is going to help if I understand your goal correctly. This component unlike a standard Accordion enables you to open more than one item at once, and for an open item to contain multiple views, with tabs enabled to switch between them.

      Could you not use a HBox containing a Canvas and a VBox? You need some code to manage the buttons to open and close them (if you want that Accordion like functionality), but it shouldn’t be a huge task.

      Feel free to give me a shout if you have any problems.

  24. Ronak says:


    I think your component can accomplish what I’m looking for…the only things I saw that weren’t honored were:

    1. Use the maxHeight of the Accordion children to indicate how far the accordion should open for said child.
    2. Horizontal layout.


  25. Tink says:

    1 shouldn’t be to hard to implement. 2 would be a huge rework of the code though.

    You don’t think my suggestion above would work for you?

  26. Gareth Arch says:

    Not to divert people away from your component :) but there is something that does this in FlexLib It’s called WindowShade. One of my fellow flex developers was trying to manipulate the SuperAccordian to work as Ronak wants, but the WindowShade will do just what he wants without any (or little) changes.

  27. Sduara says:

    Example link does not work

  28. condeis says:

    Hi I am new to Flex, I am using the component SuperAccordion, I wonder if it supports the internationalization.
    I have tried it but doesn’t seems to work even if my code is correct.


Leave a Reply