How to make one of the dropdowns open on page load

Design help Animations & Interactions
1

Hi design folks,

I’ve cloned this accordion build and trying to convert it into a menu.

Here is the preview link.

To make it work as a menu instead of just an accordion, I need to find a way to keep one of the dropdowns open on page load.

If this clone is not the right way to build an accordion menu can anyone please point me to the right project. I’ve watched almost every accordion tutorials out there but they all are just acoordions so does not function like a menu.

Can anyone please help me out here! Thx a lot!

2

Anyone please? Can’t help but thinking this should be a very simple trick.

3

Again seeking help and none of the existing posts work for me.

4

You try this idea?

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

Copy Paste before body (After jquery loaded).

I test - looks like this solution not working anymore (Webflow change the dropdown code).

5

yes I did try this and I’m not sure if it’s because how I implemented the code.

Should it be targeting the whole dropdown? or the trigger? or the item list? Where should I paste the code?

Either way I tried many combinations and it doesn’t work. Thanks again for looking into it though!

1 Like
6

Has there been any updates on this? I’m still experiencing the same thing. The code by Samliew works fine on inspector, tablet and mobile views but doesn’t behave the same on a normal desktop window.

@SuperLalapenn @samliew @Waldo

7

Has someone found the solution?

8

I want to add the following design to this discussion:

https://webflow.com/website/Perfect-Accordion

From my perspective, this is a solution many people are looking for in multiple threads here.
Bonus: New update the day before which features automatic scroll for better UX.
Of course this can be disabled.

If you need an accordion in Webflow, I think this is a great design which features useful extra options when needed.

1 Like
10

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.

3 Likes
11

Thank you, your post was a lifesaver!

For anyone following this method here, you’ll just want to make sure the page is loaded before running the code above, otherwise it will be overridden by any “initial state” animations.

12

Thanks, Thomas!

I tried implementing what you suggested above but it didn’t work- I myself checked the id and its #w-dropdown-toggle-0 for my build.

Does it have to do with any page load code as well?

The overall functionality made by using webflow interactions use initial state.

Please let me know the solution.

13

Hi Blanchard!

Please tell- How could I ensure that- I built the accordion as per the webflow tutorial and tried making the first one open on page load using the code above but it’s not working.

I might be doing something wrong here- please let me know.

Read only link -

https://preview.webflow.com/preview/artista-deco?utm_medium=preview_link&utm_source=designer&utm_content=artista-deco&preview=033151b79cbd24275d5aaaed48171889&workflow=preview

14

I did some tinkering, used window load, and called for the function.
So it’s working only on the chrome browser and not on any other.

it is also not working on mobile devices.
Anybody help?

15

I am also needing this function. Make first toggle element open by default so they are not all closed. I tried

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

Because the first id is actually 0 not 1. No avail! I can clearly see that the dropdown element contains an ID array when inspecting code. I placed this code in body of page. Anyone else have luck?

16

Hello, you can use this solution. Don’t forget to change the ID to match the accordion toggle you want to keep open. It works on mobile devices too.

<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        const toggleMain = document.getElementById('accordion-toggle');
        if (toggleMain) {
            toggleMain.focus(); // Bring focus to the element
            
            // Create and dispatch mousedown event
            const mousedownEvent = new MouseEvent('mousedown', {
                view: window,
                bubbles: true,
                cancelable: true
            });
            toggleMain.dispatchEvent(mousedownEvent);

            // Create and dispatch mouseup event
            const mouseupEvent = new MouseEvent('mouseup', {
                view: window,
                bubbles: true,
                cancelable: true
            });
            toggleMain.dispatchEvent(mouseupEvent);

            // Create and dispatch click event
            const clickEvent = new MouseEvent('click', {
                view: window,
                bubbles: true,
                cancelable: true
            });
            toggleMain.dispatchEvent(clickEvent);
        }
    }, 100); // Delay of 100 milliseconds (0.1 seconds)
});
</script>