So I started out with the need for an Accordion, but also to conserve real estate on the right side of my application. I then thought what if I could collapse the accordion, but still allow the user to see the accordion headers.
This is the component I ended up with.
I will give a quick run through of how I implemented the CollapsibleAccordion component. If you want more details you can look through the source code posted below.
I wanted this component to behave exactly like an Accordion, but instead of trying to hack and extend the Accordion class to get this functionality, I started from scratch and extended Container. The component is a composite of Buttons, that represent the accordion headers when in the closed state and during animation, that I rotate and resize and the Flex Accordion whose headers are styled the same as the buttons, so the effect is seamless.
In order for the container to behave like a real container I needed to define a DefaultPropery. The DefaultProperty basically tells the container that when content is added there is no variable defined to put it in to default what ever you set in the metadata for DefaultProperty.
The effect I wanted was to have the Accordion headers swinging from a closed state to an open state and then the content for each accordion pieces sliding in. To achieve this I take the buttons rotate and resize them to the appropriate spots, most of this logic is done in the updateDisplayList. Once the buttons have animated to their correct locations, the accordion then slides in, since the headers for the accordion and the buttons are styled the same the effect is seamless when the buttons are hidden. The addition of a collapse button on the first accordion header allows the user to close the accordion back to the close state. I basically have the component do everything in reverse to achieve the close.
Most of the work is done in the commitProperties and updateDisplayList methods.
Below is just a very simple sample along with the code below.
License:MIT License