Two clicks on dropdown menu

There are other posts with similar issues, but they’re a bit different from what I experience, so none of the solutions suggested helped me.

I have a dropdown menu that lets users choose products by color.
The first click on the Dropdown Toggle “Pick a color” opens the color options list. Clicking on one of the colors in the list filters the items so that only items with that color show, and the dropdown list collapses. So far so good.
But when I then click on the Toggle again, nothing happens – a second click is needed to open the dropdown list again.

How can I do it so that the user doesn’t have to click twice after the first selection/filtering?

Thanks for your help!

I tried this:

and this:

looked at this:

Can’t figure it out!
Can anyone help?
Thank you!

Sorry, I just realized that the visual I provided above earlier may have been confusing.
I just replaced/updated it. I hope it helps clarify what my issues are.


Maybe running $(".w-dropdown").trigger("w-close") in custom code on your dropdown’s options would be helpful?

Hey, thank you, Aleksandra – will definitely try that. Will let you know how that goes.

Hi Aleksandra,

It’s been a while, I was caught up with another project.
Coming back to this, can you please elaborate a bit more how I would apply your solution in my case? I’m not sure how I call that specific class and where the code would go (embed?).

Below is the link again.
Don’t get turned off by the black opener, was a client request I couldn’t talk them out of – yet. Just scroll down to the catalog section.

[Webflow - Ornament-is-crime]

Thank you!