Streaming live at 10am (PST)

How to replicate this toggle look/feel/behavior?


#1

On the FAQ page on this site, there’s a great toggle for an FAQ. It’s in a template for a different project and I can’t figure out how the show/hide behavior is triggered. There’s no interaction I can see in either the legacy panel or elsewhere.

I’d love to be able to just copy it from this project to a different one but I obviously can’t. What’s the most expedient way to replicate it with the toggle behavior?

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/ddaf?preview=e9f3a28942f7f1f8262c6e054d190208


#2

Hello @eyeheartny

The trigger it’s in the wrapper as you can see here:


#3

Thanks Aaron. I see the interaction and I will replicate it. Does this look like it was created from a Dropdown element or just started from scratch with the show/hide added via interactions? The animation of the arrow is slick and I can’t see where that is controlled either.


#4

The interaction is created with simple elements, you can take at the navigator panel to see how it was built.

This is the whole structure of every FAQ:


#5

So I’ve got the FAQ structured on the new site I’m working on. If you go to the TrueImpact page on the link below you’ll see there’s an FAQ that I tried to structure identically. I added the same interactions but none of them are working at all. I set the initial appearance for the Toggle Content section to 0px height and when I preview the site nothing works.

https://preview.webflow.com/preview/dimensionslearning?preview=96f208aa444ba9fda5e5d725fbe48e72

Any idea how to get these interactions to kick into gear?

Here you can see they’re applied to the wrapper just like in the other site, but they still aren’t working.

Thanks!


#6

You’re missing some key things:

I suggest to review the whole structure, element by element and check for the interactions, styles, etc attached to each one of them.