Streaming live at 10am (PST)

Accordion Menu List Problem


#1

Hi lovely people of webflow,
I’m back here again with another problem for my personal website.

I’ve been trying to follow Waldo’s accordion menu tutorial (https://webflow.com/blog/the-art-of-progressive-disclosure-in-web-design) but have been struggling with the interactions and also trying to push the other elements of the dropdown list down when someone clicks on it.

In the Commerical page, the accordion menu doesn’t push everything down. I’ve attached some screenshots here, hopefully, it helps.

Hope to hear from you guys soon! <3
https://preview.webflow.com/preview/elainechng?preview=a376b9d31c1c98f76cac66b467670297

Elaine


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

This is surely an issue with the computed height of the dopdown list.

I don’t know you ended there but your dropdown list element has a defined height of zero and that’s messing with how dropdown lists work.

If you pass it to Auto your bug is fixed.

Does this need any interaction to work?

yadiyadiyadavince


#3

Oh opps I didnt know that it was a small fix! Was following Waldo’s accordion tutorial and thought that the dropdown list element must have a height of 0 for this to work.

I think interactions are nice to have, and I will try to figure it out from the tutorial (it is kinda confusing for me since I’m a beginner here). Anyways thanks for the help! :slight_smile:


#4

I suspect that if there’s a 0 height in the equation it’s because you wanted the menu to unfold with an animation, not appear like this at once. But that requires more settings than you have here, and the use of one of the special interactions triggers.


#5

Hey Vincent,

I’ve decided to let that go and right now, I have another problem. I noticed that after I click the accordion menu, the images will show (which is what I want). However after I am done with it, scroll down and click another accordion menu, it will not go to the top of that menu and will be somewhere awkward in the middle.

I’ve attached some screenshots to explain it better. Hope to hear from you.

Elaine