Streaming live at 10am (PST)

Creating a dropdown that pushes elements down the page


#1

How do I create a dropdown like the one shown in this gif?:

This dropdown pushes other elements down the page instead of creating a div block that floats above the dropdown element itself, like the normal Webflow-standard dropdown.

Thanks,
Josiah


Here is my public share link: https://preview.webflow.com/preview/just-one-dime-members?preview=04b6430c5d21e335270b7ddb33b9e43e
(how to access public share link)


#2

Would example 3 from this page be what you are looking for (CLICK TO SHOW & HIDE CONTENT)?


#3

Hey @Joe_Hoff,

Thanks for the reference! I will definitely try this out.

Josiah


#4

Hey,

I tried doing it the way the "interactions.webflow.com" did it under example 3, but I have a problem:

As you can see in the gif, the 2nd time I click the dropdown, the div block grows to 1px first, then grows to it's auto height. Here's my share link.

First I built a hidden div block that has "display: none" at first appearance:

Then I have the trigger, which is a click:

The trigger is supposed to open at first click, and close at second click. The problem I'm having is that for some reason, after the second click, when I click it AGAIN, it keeps playing the second click (setting it at height: 1px, then display: none) and THEN the cycle starts over.

Please let me know if there's a way to fix this, or if this could be a bug.

Thanks,
Josiah


#5

For your first click - remove the delay (currently 500ms on height) AND/OR for your second click you can set the interaction to 0 px instead of 1 px the issue appears to go away.


#6

Hey @jkniep,

Check this out https://webflowcodestutorials.webflow.io/click - Go to the 2nd section under Show on hover.

Hope it helps.

Best,
Naweed


#7

Thank you for this reference, @nwdsha! However, I just tried the "Dropdown widget as an accordion" tutorial, doing exactly what the steps say, but now my dropdown has a stutter at the beginning:

All I need is a dropdown that works like in the first gif I posted in this topic. If anyone knows how to accomplish this, please let me know!

Thanks,
Josiah


#8

Hi @jkniep,

You've built it correctly, the stutter is due to the fact that there is a 300ms delay on both heights when the dropdown opens. I reset it to 0 and it opens instantly. It doesn't save in share view so you need to do this.

Let me know if it works for you.

Best,
Naweed


#9

Hey @nwdsha,

Thanks for the the screenshot. The problem is that I want it to open like the gif in my first post for this topic. I would rather it open with an ease transition than just popping up instantly. Is there a way to do it with ease without the stutter?

Thanks,
Josiah


#10

Hey @Joe_Hoff,

Thanks for the suggestions. I did this and now I think I'm experiencing a bug. Just go to http://just-one-dime-members.webflow.io/, and you'll see that every now and then the dropdown will open with ease, but most of the time if just pops open suddenly. Do you know what is causing this?

-Josiah


#11

I don't see the bug you are describing. It opens with ease every time for me. I'm on Chrome. What are you using?


#12

I'm also using Chrome. Let me try clearing my cache and see if that solves the issue.


#13

Just tried it on Chrome again and another computer and it's still glitchy. I think I'll create a new topic and report this bug...what would be causing it?


#14

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.