October 2, 2019
Homemade Accordion Effect
Comments
(5)
October 2, 2019
Homemade Accordion Effect
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Legend 61 posts
Followers: 57 people
(5)

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.

Play
5 Comments
2019-10-13 17:00:25
2019-10-13 17:00:25

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.

Like
2019-10-08 08:34:44
2019-10-08 08:34:44

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.

Like
(1)
>
Gaanf
's comment
2019-10-08 13:06:32
2019-10-08 13:06:32
>
Gaanf
's comment

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.

Like
2019-10-07 13:05:19
2019-10-07 13:05:19

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

Like
(1)
2019-10-07 12:21:03
2019-10-07 12:21:03

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 !…

Like
(2)
Add Comment