00:00
Buy Me a Beer

How to Automatically Open a Dropdown in Webflow on Page Load

Install the VisualDX Script

Firstly, make sure you have the VisualDX script before your </body>

Open First Dropdown in the list

Copy this attribute:

vdx-dropdown-open

Paste the attribute into the Custom Attributes Name field of a Webflow Div Block. This Div Block is the parent of the Dropdown you wish to open on page load.

Body
Dropdown Wrapper
Dropdown
Dropdown
Dropdown
Dropdown Wrapper
Style
Settings
Interactions
Div Block Settings
Custom Attributes
Name
vdx-dropdown-open
Value

Open Any Dropdown in the list

Add number into the Custom Attributes Value field of a Webflow Div Block.with the vdx-dropdpwn-open attribute.

In this example we have added "2" therefore opening the second dropdown on page load.

Body
Dropdown Wrapper
Dropdown
Dropdown
Dropdown
Dropdown Wrapper
Style
Settings
Interactions
Div Block Settings
Custom Attributes
Name
vdx-dropdown-open
Value
2

Publish and Test

Sponsor the Magic and
Buy Me a Beer

Ailín Tobin
Ireland

VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.

Think of it like buying me a pint for keeping your Webflow spells flowing.

You can support it here.

Cheers, legend!

This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.