▼
Streaming live at 10am (PST)

How to get dropdown open on page load automatically

Design help Custom code
#1

I’m trying to get one of the dropdowns to open automatically when the page loads (so they’re not all collapsed). I’ve looked at tons of threads here on this topic, but none of them seem to work anymore.

I’ve tried this code, but it doesn’t seem to work…
$(’#toggle’).trigger(‘tap’);

Any ideas on how to get this functionality?

Solution note: The solution below works! Just make sure not to have an animation that includes an “initial-state”

Here is my site Read-Only: LINK

#2

Hey @peterluba

One idea would be to create a custom dropdown instead.

If you do this you could then use interactions to automatically open the dropdown on page load. No custom code required.

#3

@Drew_Schafer Is there not a quick code insert that could give me this functionality? Asking because I already have this set-up and would be easier than recreating everything custom.

#4

Add screenshot of your desire result.
Webflow dropdown widget?
Where in your page? One dropdown or more?

#5

@Siton_Systems When the page loads, I want this dropdown to be open automatically: Markup 2021-02-15 at 21.53.12.png • Droplr

#6

It is not working - hard to know why (Something in the dropdown code I guess).
The click in general is a very simple code/idea:

#7

Here you go:

<script>
  var Webflow = Webflow || [];
  Webflow.push(function () {
    document.getElementById('w-dropdown-list-1').classList.add('w--open');
  });
</script>

Caveat: Since the dropdown is open by default then closing it for the first time takes two clicks. Because I haven’t overwritten the default Webflow’s interaction to open it on the first click and then close it on the second click.

How to use:

  1. Paste this code in the body tag.

  2. You need to replace w-dropdown-list-1 with an ID of the dropdown list you want to show by default. Do you know how to use Dev Tools to locate the ID? If not. Then add a custom ID manually within Webflow to the Dropdown List (the one nested within the parent Dropdown) element:

Screen Shot 2021-02-16 at 9.18.07 PM

and use that ID in the code instead of w-dropdown-list-1.

I’ve tried this on the default dropdown and it works. But your specific case might have some other requirements that might not work with this. Let me know if that’s the case.

Note, test the code on the published version. It won’t run in preview mode or the designer.

1 Like
#8

Yes! This works. Only caveat is that it will break if you try to use animations that include an “initial state.” TY

1 Like