In my portfolio I have several accordions stacked on top of each other. They are built with the webflow drop down menus, and are wrapped in link blocks that are linked to an element id #Process-Section-Top. This scrolls the user to the top of the section each time they open an accordion (because otherwise it opens in the middle or end and they have to scroll all the way up, I had a lot of content nested in each accordion).
This works great, BUT I have content inside the accordion that expands on mouse click. When the accordion opens, the link block opens with it, so every time a user clicks on an image to expand it, they are brought back to the top of the section, because they have interaction with the link block as well.
I have already tried setting height constraints to the link blocks and it breaks the accordion.
How can I fix this, ideally without having to rebuild the entire accordion?
Here is a link to a project page that has this feature (all the way at the bottom) Webflow - Josie Allison Portfolio
The link blocks have the class Accordion Section. Inside them you’ll find the webflow drop down menu component. The dropdown elements have the class Process Section, the Dropdown Toggle have the class Process Toggle, and the dropdown lists have the class Dropdown Lists.
If it’s helpful, you can find the images with the expansion interaction. The images are wrapped in div blocks have a class Expanding-Image, and the images themselves have the class Expanding-Image. The interaction relies on embedded html code as well as webflow interactions