Streaming live at 10am (PST)

Accordion style drop down?


#1

Hello,

Does anyone have a widget or idea how to get an accordion drop down for a food menu?

http://tin-cup-bar.webflow.io/ is the website I am working on.


#2

Hey @Quantumgo are you referring to this kind of food menu effect?

http://steamboatbills.com/menus/restaurant


#3

Yes exactly! Should I use the "dropdown" button and create the category inside the dropdown?


#4

I would instead use the Click Trigger functionality for this effect:
http://help.webflow.com/lesson/click-trigger-interaction

You'll see a link to a video of making a show/hide element in the old Webflow UI. But still takes the same steps. :smile:

I use the same approach on this page here:
https://preview.webflow.com/preview/silver-dollar-city-2016-season-passes?preview=e1ffd72baadcd29065678ac2b786b793

Just scroll down to the FAQ section, and go to the interactions panel if you need to follow some steps on creating the expandable sections. :smile:

Important aspects:
Overflow: hidden on the parent element (to hide the content within it)
Initial Appearance of the content to show to height of 0px
First click interaction would be to set height to auto of the content you'd like to display
Second click interaction would be to set height back to 0px

I recommend creating nested elements and nested interactions to make one set of interactions to apply to multiple elements :smile:

Feel free to reach out with questions. :smile:


Text overflowing out of the dropdown
#5

Wow thank you! Is there a way you could help show me how to do this? Also how should I go about nesting these to make it work properly?

Here is my share: https://preview.webflow.com/preview/tin-cup-bar?preview=de9b5353a1a88407b084998ff0b49554

Thanks! I'm still pretty new to all of this!


#6

okay so I am attempting this with the bottom section of my menu "up for a challenge?" I have one div with all of it inside, then a second div with the bottom items inside. How do I do the interaction so when I click on the up for a challenge the bottom drops open? I can't get it right...


#7

Okay so I got it to work but it just appears and doesn't "drop down" how can I achieve that? Sorry I'm such a pain in the toosh!

Also it looks bad.... how can I make it push everything else down like yours?


#8

Hey @Quantumgo I can get you a full on how-to a little later today, just taking a quick lunch break now. :smile:

But for the show/hide expanding sections there's a great how-to video here: http://interactions.webflow.com/click-to-show-content-video

It's in the old user interface, but the steps are essentially the same. Here if you have questions. (btw be sure to tag me @Waldo so I see your messages right away :wink: )


#9

Thank you! I'll keep trying to get it down but I will also wait for you! Thanks so much for all your help and patience!


#10

My pleasure to help, talk soon! :smile:


#11

@Waldo, did you ever complete the video tutorial for this?
I went looking for this solution a while back and ended up trying to follow this: "Dropdown widget as an accordion" http://webflowcodestutorials.webflow.io/click

I had some success, but I don't think it is as clear as it could be. Additionally, I ran into issues trying to copy a working dropdown menu once I got one item working in order to easily duplicate functionality and only have to change menu content. I am using dynamic content so I don't know if thats why the duplication didn't work well.

I'd love to see the process too.


#12

Hey @mmediaman & @Quantumgo now I see what you're going for exactly. This will take a little bit longer to make a tutorial for but I'll be following Steven's tutorial for you all. As far as applying it to your current menu @Quantumgo that will take a little more work. Let me think on that one a bit more. :smile: Talk soon! And Happy New Year!


#13

@Quantumgo I ended up using the simple click-to-show content as described here: http://interactions.webflow.com/click-to-show-content-video . I think it works well for a food menu because I think people may want to look at the contents of more than one category at once. I myself have had the frustrating experience picking dinner and side items when I can only see one at a time.

You can see what I ended up with here: https://preview.webflow.com/preview/jayscaribb?preview=3da63c151ab2a3127c742c1ac63f6072


#14

@waldo, hope you had a good New Years! Any update on this by chance? :smiley:


#15

is it just me or is Webflow having issues today? I can't seem to get any videos tutorials to play..


#16

@mmediaman for some reason this interaction is not working for my menu correctly... what am I doing wrong?

https://preview.webflow.com/preview/tin-cup-bar?preview=de9b5353a1a88407b084998ff0b49554


#17

@Quantumgo I made a little expand/collapse piece here (pay close attention to the interactions on each item):
https://preview.webflow.com/preview/expand-collapse-tutorial?preview=ff27712af522de5ab65e018200181cfb

This will be much easier to apply to your menu layout than the accordion drop down piece (which would require a full rebuild of your menu). If you're up for that I can help walk you through it. Happy New Year!


#18

@waldo

I think I did something wrong... I tried it on the appetizers section on my site but it doesn't seem to be working quite right.... Should I Just rebuild it from scratch and follow these instructions?


#19

@waldo I followed it exactly and just renamed the divs to exactly like yours and still is not working properly.... :weary:


#20

I think it may have something to do with having columns in there? I'm so confused and I've redone it multiple times.