How do you use the dropdown interaction?

Is there some info out there on how/when to use the dropdown interaction? I’ve been struggling to no end creating a custom navigation that uses a click interaction with “hide and show” content. While I do it it to work they way I’d like, some intractions are negated and require a second click to reset things. Thnikng that maybe the “dropdown” interaction might take care of this but no documentation on how to set up.


Here is my public share link: LINK
(how to access public share link)

@Port_of_Folio

Hi!

Can you provide a read-only link so it’s easier to understand what you’re looking for? :slight_smile:

Sure, although it doesn’t work and I don’t see how it can ever work using a click interaction so I wouldn’t get too deep into what I’ve done here: http://gwynnvalley.webflow.io/

work link: Webflow - GwynnValley

The first two links “who we are” and “summer camp” are the two I’ve attempted to get to work together, to start. I need the dropdowns to open the menu, and then/if another main menu link is clicked, all others need to close or (I wish reset). They do not. A second click is required to reset the first link. And I’d like to do this in Webflow only and not weave in some extra javascript. There’s already been posts about this issue and it’s been added to the wish list as can be seen here: A toggle trigger or 'reset' first click to fix first/second click trigger problems

I just need some kind of overview or tutorial on what the dropdown interaction does, to see if it can help me.

Okay! Well, first and foremost, is there any particular reason you haven’t used the native Dropdown widget?
That will solve all your problems and using the dropdown interactions along with it is really easy!

I was hoping to building in more controls with transitions, positions, states, etc.

So, the “dropdown” interaction is built specifically to work with the native navigation dropdown functions to offer more customization? Again, I just can’t find any documentation about with that trigger relates to.

I might be misunderstanding. But I think you are on to it. When you press one of the links, Who we are, summer camp, etc
All the other dropdown closes in 0ms and then the one that is supposes to open, opens. Just like you have done.

Its just a bit of manual work.

So you make 3 closes on first click
and 1 open on first click.

But I guess this is what you are trying to do, but cant get to work?

Yes, that’s correct. I’ve only placed the interaction test on those first two links. The problem arises if you first click on “who we are”, then click on “summer camp” (all good) but then if you go back to click on “who we are” it requires a second click because the interaction for that link needs to reset itself (reacts as if it’s still open). Wish there was a way to initiate a reset within Webflow and no need for custom javascript.

Ive tried to do the same as you, and you are right. There are something strange going on.

Heres a example

If you try and go back and forth between HOME and ABOUT, the button sometimes need to be pushed two times.

Im not sure why and I have to investigate tomorrow. :slight_smile:

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