Dropdown accordion expands to full screen before closing

Design help Animations & Interactions
1

I followed the tutorial here (https://www.youtube.com/watch?v=SSnXMVb4veg) to alter the standard dropdown element into an expandable/collapsible accordion.

When I click to close the accordion, the main element expands to full screen quickly before closing. I’ve followed through the tutorial a number of times, making sure to complete each step correctly, and I still have the problem.

Any help would be appreciated!

1

Here is my public share link:
https://preview.webflow.com/preview/accordion-e42def?utm_medium=preview_link&utm_source=designer&utm_content=accordion-e42def&preview=e699b846c0df7a31e6ca525243cc795d&workflow=preview

2 Likes
2

Did you find a solution? Trying to figure out the same problem today after following the same tutorial.

3

having the same issue

4

You may want to check your close animation on click two and that the height on the answer class (size) is set to zero pixels and not zero REM, hope this helps.

1 Like
5

To build on what @unreallogic said,

I have found that the fix for this is to make sure that the close animation has the height the dropdown will end up as in PIXELS and not REM units.

Hope this helps! Solved the issue for me.

3 Likes
6

Thank you guys! Very helpful! @Finsweet FYI - I LOVE your Chrome extension. One oddity to note though — if you use the Px to Rem converter… it does “mess up” Webflow accordions on close.