An accordion effect built from scratch. No widgets. No SWF.
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.
Interesting as usual. One problem, just for the sake of other users: Click boxes are not allowed in a Fluid box. This example is for a non-responsive project.
Accordion is not one of my favourites neither, but it is a quick way to display a lot of text content on one slide.
Hi Greg,
Regarding your above remark that you run into problems when trying to move buttons to new positions:
I toyed around with moving SmartShapes used as buttons a while ago, and found out the hard way that they would only retain their interactivity when I moved the actual element (say id = “button”), as well as the corresponding canvsas element (id = “buttonc”) at the same time.
I have actually tried moving multiple combinations of all three elements that have an instance of the object name. (button, canvas, and wrapper) None of them have proved reliable for me.
Sometimes the button will depress but not fire, sometimes it will snap back when you hover over it, sometimes it will snap back when you pass through the travel path with the mouse, and other times it just won’t do anything at all.
The ones that snap back retain function in the original position but I never get a chance to try clicking on them in the position I try to move them to.
I will keep playing with it.
I have been working on developing a blog and portfolio site but it is not quite ready.
Wait – but isn’t this a site where all my examples can be found…? Ha Ha
Hello Greg !…
I’m not a fan of the accordion effect in general (as we can do it easily just by showing or hiding what we want with simple actions or JavaScript as you learned us to do a short time ago). But as usual, your example is quite amazing.
(It would be nice to share all your examples and explainations you have done in a blog or a site ?…)
Happy Captivating !…
You must be logged in to post a comment.
