Set dropdown initial state to open

mmh interesting, it seems webflow doesn’t use <select> markup for its dropdowns but <div> instead. I see that when a “dropdown” is open, it has a webflow class of “w–open”. You might want to programmatically do this like so:

JavaScript

(function openLouie() {
  let louie = document.getElementById("host-toggle");
  louie.classList = "host-toggle w-dropdown-toggle w--open";
  console.log(louie);
})();

Codepen with running code here.

Don’t forget to wrap the function inside its script tag.
Let me know if that works for you !
Great UX and UI by the way… very smooth.

Anthony, thanks again for the help. I think we’re getting close. The added the open class to the toggle. But, it didn’t trigger the dropdown to open?

Ok, what about using samliew’s trick and target your id directly like so:

// 🥑 on DOM loaded
document.addEventListener("DOMContentLoaded", event => {
  $("#ebfe814e-5a60-6886-5783-7f3eacf1cb99").trigger("tap");
});

sorry I missed your post earlier. it seems that your home page is now different than what you described.

anyway, you cannot use smart (curly) quotes in JavaScript the way it is displayed in your post so you might want to get that checked.

I’ve been trying to implement your original solution on my site but nothing seems to work. I have renamed classes and placed code in the before tag. Have there been any changes to the dropdown implementation that may have made the code obsolete? Just want all of my dropdowns to be open when the page is loaded so the content populates the space.

Hey Anthony, is it possible to set the initial state of a dropdown element to open? Other than it should behave as usual. Trying to build an accordion with the webflow dropdown elements, first one should be open initially.

Best
Jens

2 Likes

Let me know if you find a solution please, also searching for that

thanks

Can you please explain which part of the code I need to rename to point to my dropdown? Thx! I’m 100% code ignorant.

Hey Sam,

I tried your trick with this code it doesn’t work! This is the preview link please:

https://preview.webflow.com/preview/accordion-menu-test?utm_medium=preview_link&utm_source=designer&utm_content=accordion-menu-test&preview=7ea6c148ddcc184cfd9c841eddf992c0&pageId=5e8cea7161313468e2f68c89&mode=preview

Hey Sam!

Can you please explain why didn’t work for mine? Copy your code but didn’t work!

https://preview.webflow.com/preview/accordion-menu-test?utm_medium=preview_link&utm_source=designer&utm_content=accordion-menu-test&preview=7ea6c148ddcc184cfd9c841eddf992c0&pageId=5e8cea7161313468e2f68c89&mode=preview

You need to replace .dropdown-toggle with the class name of the toggle element. If you want to use the element ID instead you can replace the . to a #.

You will also need to put these in between <script> ... </script> tags on the custom code box

I have tired $('.dropdown-toggle').trigger('tap'); but it only seems to work on Inspector mode, tablet and mobile views. Does any one know why that’s happening or a way around this to get it working on Desktop?

@samliew @anthonysalamin @jeffberube

Hi @anthonysalamin, @jensvahle and @samliew,

Thanks for your contribution about this topic. Hower I’m having a similar issue that I can not solve. I’m having this design where the first dropdown is open and displays the active FAQ item. Do you guys know a way to initial open the dropdown on load with a collection list in it?

https://preview.webflow.com/preview/toot-hq?utm_medium=preview_link&utm_source=dashboard&utm_content=toot-hq&preview=7c983f33ed31a03ee567cf7274a913a6&mode=preview

Yours is actually the only one that worked for me haha

Hi @martijnrunia ,

I’m trying to achieve exactly the same thing as you, did you ever figure out how to do it?

Thanks! :slight_smile:

Rose

1 Like

Hey @samliew
I tried your trick and it works for setting the first dropdown as open by default. It worked.
But there is a problem, It is not closing when I open other dropdowns.
I want it to close when I click to open any other dropdown…
How to achieve that? Please help!

@harikshore That’s the normal behaviour of Webflow dropdowns. If you want to close all other dropdowns you’ll need some custom code.

its now 2023 and nothing works to target the first dropdown toggle element ID to open. I tried this but the tap function is for mobile. I tried mouseup for desktop. Neither works! Any coders that know how to make this work in 2023?

Mobile

<script>
('#w-dropdown-toggle-0’).trigger(‘tap’);
</script>

Desktop

<script>
$("#w-dropdown-toggle-0").mouseup();
</script>

You want an initial state of open or a permanent state of open?
For a permanent state, I’d probably use CSS to force it to be visible.

For an initial state, try click(). You may also need to look at event bubbling, it depends on how and where Webflow.js event handler is attached.

Not that today this can be tricky because browser have implemented security measures to differentiate between script-clicks and user-clicks, to mitigate clickjacking as a hacking vector.

If you encounter security barriers it’s likely easier to just build your own custom nav from DIVs and interactions.

Not exactly what OP was looking for, but I just found a handy solution to have the/multiple default Dropdown /Accordion element(s) opened in the Designer for easy accessibility for editing copy while in development:

Just add a custom code embed with this css rule:

<style>
.w-dropdown-list {
	display: block;
}
</style>

This makes that all dropdowns are in the “open” state in the Designer. The animation that runs on page-load sets the initial state back to closed.