Hi! I have a question about this interaction on the FAQ section of the QuietCool page. When you expand the dropdown, everything seems smooth. But when you go to collapse the question there is a pause and it’s all messed up. I’ve checked over my interactions and I’m not sure what’s wrong. Sorry the page is a little rough. I haven’t finished styling it yet.
Thanks,
American Upstarts
Hi,
It seems to be working for me, can you explain in more detail?
That seems to be working too, the dropdown animation plays smoothly but I can’t see a weird pause or anything as described. What browser are you using?
I’m using Chrome. I reloaded it all and it still does it for me. Maybe it’s a problem on my end.
I’ve just had another look and I actually can see a very slight pause as the dropdown closes actually, I didn’t notice it the first time. Is that what you’re referring to?
Yeah it’s actually a fairly big pause for me.
I’m pretty sure it’s because you’re telling the ‘dropdown content’ class to reduce it’s size to zero, whilst also having a padding of 50px on the top and bottom sides. So the size of the actual content is being reduced to zero with the animation, but leaving 100px of padding on the page. Then when the Hide/Show part of the animation plays the element is hidden causing the apparent jump.
I would try restructuring it so you have a div block in your dropdown content housing all the content, then you can apply the padding to the div block rather than the dropdown content. I’ve had a little go but because it’s on the preview I can’t tell if it will work or not on the published version. Let me know how you get on and if it’s not working I’ll take another look.
Ok! I think I got the smooth interaction figured out. I started over and used the classes they give you. I also did what you said and dropped all the content in a div block and gave that padding. When I got done building the interaction it still was doing the pause when it collapsed. What seemed to fix it is I changed the main Dropdown class to block instead of inline block. Now it seems to work but I don’t know the reason. One question I do have, is when you duplicate the dropdown, the arrows don’t behave properly when you click on the questions which doesn’t make since to me. Also I just added a div block for the dropdown content on this new one to test it so that why the words aren’t in there. Anyways, thanks a million for the help so far.
Hi,
The arrows are misbehaving because on your dropdown animations you have the animation to effect ‘all elements’ with the ‘dropdown arrow’ class. If you change it to effect ‘only children with this class’ then it will only effect the arrow that is nested within the correct dropdown 
Perfect! Fixed my problem. Thanks.