Creating a custom Accordion component with no child selected in Flex3

Any worked on custom Accordion component with no child selected. The following is my requirement

By default on initial load of Accordion, only headers have to be shown. On each header click, only the clicked header and the respective 开发者_StackOverflowcontainer should be visible. If we clicked again on header, the Accordion will be moved to initial state.

These features should work similary how the Accordion will work with all TWEEN effects.

Thanks in Advance.

I implemented a similar concept with a TabNavigator.

My implementation used the following steps:

Initialize the container with height = 0

Add a mouse-click listener to the container (onCapture=true, because tabNavigator kills the click event, not sure if you need this for Accordion container)

In the click handler, add/remove tabs depending on the state and change height to appropriate values (back to zero if coming from open tab to closed container, from 0 to 100% if going from closed to open).

Yes, this is very high level, but the question was asked months ago. If you are watching it, and you are still in need of more detail, please comment and I can help.