How to do dropdown always open?

Ok, there is a way to do it with interactions that works way better then dropdown.

I have built it before, just gotta find the example now.

Are these CMS Items or just elements on a page?

Just elements on a page. Will the font-size trigger work, while the active section is opened?

It should trigger, although why would you need to use that one? Unless you are making the font size bigger.

Sorry, I decided to start refactoring it for a project I can use an accordion on. I want it to run as pure custom code versus a mix of interactions / and custom code. So the code / and interactions have already changed and is flux. I will remove the link to my clone, since I don’t want to have to return to a backup to take it back to the state it was when I published it. I should have made a clone of my clone.

1 Like

After starting the process, I realized that I had forgotten that the client requires accessibility support. Easy fix, added a JQuery-UI Accordion. Collapsable is true, first item active (open)

https://accordion-777d44.webflow.io/

You know, it’s exactly what is needed, but i’m not a code master) I can’t figure it out without webflow preview( Maybe, you can add it, please :slight_smile:

Sure - Here is the readonly share.

Used

Code placed in HTML Embed, CSS added to head (link via CDNJS) and JS before body close (link via CDNJS)

If I was going to use this in production, I would use the download builder to create a custom JS file, place it on an external server, and include it on the site. The customized JS file was 43kb compressed.

You will also manually have to style it with CSS, since the designer only shows the progressive content (no JS) and can’t/won’t let you load and edit third-party stylesheets.

1 Like

It’s been a while, but in case anyone is still trying to do this, Webflow targets the “Accordion_Toggle” element and listens for the “mousup” trigger to open and close the accordion.

Every accordion on your page has a unique ID that follows the naming convention “w-dropdown-toggle-1”, “w-dropdown-toggle-2”, etc.

If you always want the first accordion to be open on your page, you’d place the following code before the </body> tag:

<script>

$("#w-dropdown-toggle-1").mouseup();

</script>

Alternately, you could give one of your “Accordion Toggle” elements a class like “open” and trigger it like this:

<script>

$(".accordion-toggle.open").mouseup();

</script>

Also, when you open another accordion, it will close the one you triggered.

Hi @tweitz
I tried this on my dropdowns but it dosent appear to be working
could you help me understand what I’m doing wrong?

Read only link: https://preview.webflow.com/preview/ziplyne-website?utm_medium=preview_link&utm_source=designer&utm_content=ziplyne-website&preview=20abdc89de7ef1f35367b9cc04824849&pageId=62d573b68d48791530c00d8e&workflow=preview

Hello, if you add the class “w–open” it will open the dropdown.

<script>
$(".footer_dropdown-list").addClass("w--open"); 
</script>