As much as some others love them, I am really not a fan of learning interactions or widgets. I prefer to build everything from scratch where I can.
I decided to work on trying to make an effect that is similar to the accordion. While this version is not as easy to modify as the built-in accordion, I maintain 100% control over what I can do with it. I can size it, color it, add tabs, remove tabs, and change the speed of the animating parts.
The trick on this one is that buttons tend to be a problem if you try to move them from their original positions. I am still seeking a way around that – have not found it yet. What I did find, is that click boxes do not seem to have the same problem. So if I provide a shape for the background of the click box – I can animate the both of them and the click box will not lose any functionality or fly back to its original position or whatever other weird behavior you may have seen.
There is a second trick to using the click boxes. The click box and the shape seem to utilize different positioning properties such that click boxes are absolute and the shapes are just relative. That means we just need to craft the animation code a little different. The shape also requires access to the canvas whereas the click box does not. Strange.
I chose to use a fade in and out with the boxes rather than an expand and contract type of animation.
Feel free to check it in action.