Set dropdown initial state to open

Hi,

I’m trying to have the initial state of a dropdown set to open. I was able to get the desired behaviour by setting an initial state on the menu itself to display: block; however that created a problem where a user would be required to click twice on the dropdown to close it the first time around.

So my second line of thought was to simulate a click on the dropdown toggle itself but that doesn’t seem to work either. Here’s the code I’ve been using:

<script>
$(document).ready(function() {

  // Tried this hoping to bypass jQuery to make sure the element would receive the event
  document.getElementById('product-details').click();

  // Tried these 2 as well using jQuery
  $('#product-details').trigger('click');
  $('#product-details').click();
 
  // Tried to fire the click on the text block inside the dropdown hoping it would bubble through.
  $('.text-block-11').click();
};
</script>

Any other hacks to make this happen? I thought maybe setting a class to open on the dropdown using the first method?

Figured I’d check in here see if anyone ever came up with a good solution before I spend more time hacking at this.

Thanks.

1 Like

Found a solution. It’s not exactly pretty but it works. Seems like the dropdown component doesn’t care about the click event and relies instead on the mouse up / mouse down events:

<script>
    var dropdown = document.querySelector('.dropdown-toggle'); 
    
	triggerMouseEvent(dropdown, 'mousedown');
	triggerMouseEvent(dropdown, 'mouseup');

	function triggerMouseEvent (node, eventType) {
      var clickEvent = document.createEvent('MouseEvents');
      clickEvent.initEvent(eventType, true, true);
      node.dispatchEvent(clickEvent);
	}
</script>

I have attempted to convert this to JQuery using the node.trigger(‘mousedown’) followed by node.trigger(‘mouseup’) methods on the node as well as node.mousedown() followed by node.mouseup() and it didn’t work. So the vanilla Javascript code up there is the only way to accomplish that as far as I can tell.

Insert in the ‘Before </body> tag’ part in your page settings and enjoy :slight_smile:

2 Likes

You can reduce all of that code to

$('.dropdown-toggle').trigger('tap');
3 Likes

Where were you all my life? Thanks!

Hi Sam!

I’d like to apply this strategy to the first dropdown inside of a collection list. I tried the following unsuccessfully:

$(’.dropdown-toggle:first’).trigger(‘tap’);

I also tried usng the unique ID webflow assigns to each dropdown, but that didn’t work either:

$('#w-dropdown-toggle-0’).trigger(‘tap’);

I’m not able to include a share link as the client needs it to be kept private. But, any suggestions?

Not sure exactly what it is you’re lookinf to do but to get the first element of a collection list or array you could use the following syntax:

let dropdown = document.getElementsByTagName("SELECT")[0];

EDIT

You could use a tiny function like so to open the first select element of your page:

(function openDropDown() {
  let dropdown = document.getElementsByTagName("SELECT")[0];
  dropdown.size = 3;
})();

Hope that helps.

Hey Anthony!

Thanks so much for taking the time to reply. Unfortunately that didn’t work… If it helps, here’s the staging URL:

The password is “passiton”.

The hope is that, in the hosts section, the first dropdown (“Louie and Shlley Giglio”) will load open. any help would be appreciated!

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