Streaming live at 10am (PST)

Dropdown toggle: Can I make it not close?

#1

Hello!

I want the opposite of what some people wants with the dropdown toggle.
I want it to not close until you either close it yourself, or chooses another dropdown.

I am using it to display content and not as a link to another page or such.
So it becomes a bit frustrating when you accidentally click somewhere outside and the thing you’re watching/reading disappears.

Does anyone know how I can set this up?

Here’s our site:
https://preview.webflow.com/preview/pratamedbarn-nu?utm_source=pratamedbarn-nu&preview=00ecd5e6a6fc94883c96550bc78288ba

For example; go to the page “Före ett samtal” and scroll down, you’ll see the red toggles I’m speaking of.

All the best,
Amanda

#2

Out of curiosity, is there any reason you’re using a drop-down and not an accordion?

Accordion | Webflow University

Edit: Never mind. I’m not sure an accordion would work for your purposes. I do have a solution that I’ll write up in a separate comment.

1 Like
#3

Using interactions, you should be able to force your dropdown lists to stay open.

I’ve created this video to show you how it can be achieved.

Here’s what I’m doing:

The interaction itself is quite easy, but the one thing you need to change on your end is giving your “Dropdown List” the same class across the board. This allows you to target all of the classes at once and apply the interaction to all of them. (See the image above to see what I’m referring to.)

That’s why I changed the class of “Dropdown List 2” to match the class of all the other Drop Down Lists in the beginning of the video.

After that, select that element (Dropdown List), and simply create a Page Load transition that uses the Show/Hide effect to force the Dropdown List to be display:block on open.

Be sure to change from “Selected Element” to Class to make sure the interaction is applied to all instances of that class on the page.

Hope this helps!

#4

Hey @mattvaru!

Sorry for my late reply

Thank you so much for your input, I’ve never even heard of the Accordion before :sweat_smile:

This solved everything! :pray:
A bit of work converting all of the drop downs to this, but definetely worth it.

All the best,
Amanda

1 Like
#5

Great! No worries.

Wasn’t sure if it would work for your use case, but I’m glad you got it figured out.

Cheers! :v:t4:

1 Like