Show/hide issue

Design help Animations & Interactions
1

Hi,

I have a show/hide issue on a long infographic.

The show/hide seems to work well (apart from the graphic just appears as opposed to slides down?), but when it hides, the content is pushed down instead of back up to the original place.

The issue can be better seen if you visit the ‘Serif Sans’ blog post here and click on show infographic:

http://wedesignlondon.com/blog#Serif-vs-Sans

At the bottom of the infographic, there’s a close button. Click it to see what I mean.

The show and close buttons work on interactions. Here’s my link:

https://preview.webflow.com/preview/wedesignlondon?preview=18c7f902641491e6ae190af9ef887a28

Hope someone can help to get the interaction to close up as oppose to the graphic being pushed down.

Thanks

Dan

2

It works as designed: everything goes to the original place when closing the div. And as you scrolled… you keep your place in the page.

You could try to also add a link to a section ID, so when you click the close link, you also get positionned where you want to be.

3

Hi,

Thanks for the reply @vincent - but it doesn’t appear to go to the original place when closing. When closing it goes to the bottom on the page?

4

Ah - I understand what you mean now when you say it stays at the same place on the page where you’ve scrolled to. So any idea how I can change that so that the div smoothly scrolls back up to the original spot without linking?

5

Yes, try what I wrote before, using a section ID. Sections IDs have to be put on an elment that is a… section, right under the body.

6

I tried, it works if you put the ID on the ARTICLE element, but it’s a bit weird (:

7

Yes, I tried it. It does work as you say, so thanks, although it is scrolling all over the place!

The new problem I have now is:

the close interaction link works with one element, but as this is a ‘blog’, I want the close interaction to work with multiple posts individually. As the close interaction works by applying it to a different element and that element is always specifically named, is the only way I can do it each time by creating a separate interaction for every blog post where the show/hide is required?

8

You’re not the only one facing this exact issue: being able to open and close things with 2 elements and still factoring the interaction for re-use. And I haven’t put enough time into it to find a solution… I even failed to do so for a project of mine. This is something I’m waiting to have Webflows’ attention to solve (:

9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.