Push/Pull Content

I’m new to Webflow but catching on quickly. Easy app and easy concepts. Nice.

I’m trying to figure out how to make a notifications top bar that pushes out a drawer below it when you click. This is not a fly-out menu, but rather it needs to push/pull toggle all the content below it.

Like this: jQuery Effects - Hide and Show

Is it a matter of literally using that code somehow?

I’m not a coder or programmer but I have some limited experience with it.

Hi DRC, welcome to the forum. No custom code required here! You can achieve this with a simple interaction.

Once you have your layout created, and the content you’d like to toggle in its own container, just create an interaction to show/hide the container that holds the extra content.


Thank you. But there’s much more to it than that, correct? How do I hide the div in the first place? And how do I target that div? So far I don’t see those options.

I thought it might be easier to just take a quick video and show you how I created the interaction. It’s pretty intuitive and just as simple as it sounds. Let me know if I can clarify anything for you!

1 Like

Hi ColemanChrisB,

Thank you very much for that, very kind of you to go to the extra trouble. Following your example, I was able to create exactly what I was hoping for - thank you!

Is there no way to add easing, btw?

There is, but not on a direct hide/show. You could play around with also adding an opacity: 0 to 100 animation in the same interaction on that Div. Or, you could wrap it in ANOTHER Div, set it to overflow: hidden, and maybe apply a size 0-100 animation to that to simulate something similar to a normal fly-in that would sit above the content.

1 Like

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