SuperAccordian Updates

At the request of a few I’ve added the ability to close the SuperAccordian.

To be able to close the SuperAccordian you must set it’s ‘closable’ property to true. This is ‘false’ by default.

When closed you have a couple of styles…

1. verticalAlign:String – “top”, “middle”, “bottom”. default is “top”.
This defines the position of the headers when closed.

2. verticalAlignOffset:Number – default is 0.
This number of pixels to offset the headers from their verticalAlign position.

Note: Closing the SuperAccordian doesn’t change its height, it only changes the height and position of the children/headers inside it.

Again, any bugs, probs give me a shout in the comments.

Updated SuperAccordianExample

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

26 Responses to “SuperAccordian Updates”

  1. Tangent says:

    The behavior is a little weird when using it with Google Chrome. I have to click at the Accordion header twice to get it stick, or otherwise it would briefly fly up, then disappear.

  2. trcoffey says:

    excellent component, tink. much needed. an observation: collapsing an area should not expand another area. a user’s mental model of a navigable area is generally about narrowing or migration. The flex container wants to fill its alloted space regardless of selected indices ‘size’ but this jus ‘don’t jibe’ with true navigation. The whole accordion should shrink/grow to expose children.

  3. I disagree to some extent. I think what your saying is true for some uses, while other uses could use an area that grows to fill the maximum possible space.

    @Tink : If you heed this and add an option for it, consider the possibility of adding the option for specifying which panels will continue to grow, and which should remain a set size, rather than an all or nothing approach. :)

  4. Tink says:

    Agreed Lee.

    What i might do is extend this to create an accordian with that functionality. One prop I am going to add to this one (false by default), is ‘onlyAllowSingleSelectedIndex’. This would then force the SuperAccordian to work like the standard one, but adding the ability to close it.

  5. Havrda says:

    Example looks good. But the code found on googles site has issues. The superAccordian package is being referenced as superAccordion. That was no issue. But when trying to use it I keep getting a null object reference on line 699 of SuperAccordion. Perhaps I got the code in the middle of some work being done on it.

  6. Havrda says:

    The actual bug is setting the property closable to true in the SuperAccrodion mxml declaration. This causes the setter of SuperAccordion to act upon several null indicie objects.

  7. [...] ncrementally 3D rotating objects in Flex using the… (from SuperAccordian Updates (from Tink) [...]

  8. Tink says:

    Thanks Havrda, I’ll comment back here once I’ve fixed it and updated the source.

  9. johan says:

    Great component, thanks!

    Any new development re. the Chrome issue?



  10. johan says:

    Tink – I cannot get the test example to compile (with the latest version of ws.tink, ver 47), getting this error:

    1046: Type was not found or was not a compile-time constant: SuperAccordionHeader.

    Any ideas?


  11. Johan says:


    The Chrome issue is the same one Tangent reported (25th Oct) – sections don’t open with a single click.

    Could you possibly send me a direct email to johan.pretorius at that gmail thingy? I want to describe the compilation error in more detail.


  12. Jim says:

    Hey Tink,

    I am trying to use this component within Flex (rather than Flash), and I run into all kinds of problems because I don’t have the “fl” top level package. Is there a swc file available somewhere that I can download and use?


    – Jim C.

  13. Tink says:

    Hey Jim

    This class doesn’t have any reference to any classes in the fl package does it?

  14. Jim says:

    No, super accordion doesn’t, and I got things to compile by removing all of the non-Flex bits from the library project. (I was originally hoping to compile them all to tink.swc) Of course, now when I include the resultant swc into my project and reference the superaccordion, things compile, but the app freezes when I change to the tab with the superaccordian on it.

    No worries. I’ll figure it out eventually.

    – Jim

  15. Kristof says:

    Thanks for the great component!
    Although I have a question: could it be that is not possible aligning the header labels?


  16. Tink says:

    Sorry mate, what do you want to do?

  17. Kristof says:

    I just want to align my headers to the left.

  18. Tink says:

    The headers are just ToggleButtonsBar’s if i remember correct so yeah you should be able to style em

  19. 1ndivisible says:


    Thanks for this. Is this still something that you are updating. Using it at the moment and patched a couple of things that weren’t working right. Is it worth sending my changes to you?

  20. Tink says:

    Hi 1ndivisible

    Yes please do send any updates to and I’ll push them into the SVN for everyone else. Many Thanks!

  21. Alek83 says:

    Hi Tink
    Goo job! Very useful component..

    I’ve got one question…
    How can I add icon to AccorionHeader? Is it possible?


  22. Andrew Alb says:

    Tink this component rocks!
    However, I am having trouble understanding how I am supposed to get it from Google code — or how to become a ‘member’ so I can download the source files easily.

    Are you referring to being a member of Google code or your group?
    Do I need an app like TortoiseSVN?

    Could you tell me (as though I were stupid) how to get your code. Or perhaps point me to a site that explains it…sorry to be the newb.

  23. San says:

    Hi Tink,

    Great component.

    I am not able to get sources from google. I tried with tortoiseSVN and received following as response

    svn: OPTIONS of ‘': Could not resolve hostname `’: No such host is known.

    it there any other site from where i can download the sources


  24. Greg says:

    I was looking for component like SuperAccordion. It’s great.
    I was wondering, however, why I am getting a null pointer exception when closable=”true” property is set.
    Any suggestions?

Leave a Reply