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

1 Like
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
9

Hey, could you help me out? Trying to do the same for this drop down on the front page. Thanks!

https://preview.webflow.com/preview/goodbyeruth?utm_medium=preview_link&utm_source=designer&utm_content=goodbyeruth&preview=2b6b58465bc8eb68689eec2327bd2c4f&workflow=preview

10

You need to use $(document).ready() method
I use this script

<script>
$(document).ready(function(){
  $('#w-dropdown-toggle-0').trigger('click');
});

</script>

First dropdown will be have "w-dropdown-toggle-0” id, second wiil be “1” and ect.

11

THANK YOU! I had to restore my webflow forum password just to express my gratitude. I can’t believe this is working PERFECTLY! I’ve spent HOURS of research and published my website hundreds of time and it was all in vain. It’s crazy how webflow can’t add such a simple setting for their dropdown elements since 2017! All the best to you!

12

Hi Max, I know this is an old topic, but is the only solution that I found, but for me is not working?
Any idea? My drow downs already have the correct id: w-dropdown-toggle-0, w-dropdown-toggle-1, w-dropdown-toggle-2 etc

I am using the custom dropdown with interactions…
thanks so much!

13

Non of the solutions in this post works in 2023 (Webflow maybe change the core code). Also to add mannualy classes like w--open will not work (On the first click the dropdown will not toggle normally).

The solution should be some Basic API of webflow for ideas like this.

1 Like
14

@Siton_Systems Ezra, this is what I’m seeing user-generated click events.

My working theory is that Webflow made a change to require isTrusted === true in their dropdown navigation code. I can’t fathom the security reasoning behind this on a dropdown element, but I’ve found no way to trigger a dropdown opening in script.

image

15

Thanks to @Stan for sharing this, I’ve dug into a solution by Francesco’s Castronuovo here, and it is working well with Webflow’s current code ( July 2023 ).

It’s simple too!

The solution is to target the toggle element directly, and then separately send mousedown and mouseup events, rather than a click.

// Make sure to target your desired element specifically
const dropdownToggle = dropdown.querySelector('.w-dropdown-toggle');
dropdownToggle.dispatchEvent(new Event('mousedown'));
dropdownToggle.dispatchEvent(new Event('mouseup'));

Francesco added a nice attributes solution for the use case where you’re wanting the dropdown to open on page load.

1 Like
16

Does this solution work?

17

Yes, it works. I’ve modified it a little bit.

<script>
document.addEventListener('DOMContentLoaded', function() {
  const dropdownToggle = document.querySelector('#dropdown-toggle-1');
  if (dropdownToggle) {
    dropdownToggle.dispatchEvent(new Event('mousedown'));
    setTimeout(() => {
      dropdownToggle.dispatchEvent(new Event('mouseup'));
    }, 10); // A short delay ensures that events are distinguished
  }
});
</script>

Where dropdown-toggle-1 is an ID on the dropdown toggle item.

18

After trying so many solutions this one worked! I added a custom ID of #dropdown-toggle-1 to the first dropdown and just copy pasted your script and it worked perfectly without any bugs! Thank you so much man

19

Hey Jakub, thank you so much for posting this code here, it workes perfectly!