Accordion Dropdown help

Hey team,

I’ve been trying to follow the guide here: http://webflowcodestutorials.webflow.io/click under section: Dropdown – Dropdown widget as an accordion for making an accordion style dropdown but not having much success. Not sure what I am doing wrong, but it sure would be nice to see a video tutorial or screenshots of exactly what the steps are.

Thanks

Here is the public share link about hald way down the page there is the dropdown: https://preview.webflow.com/preview/slate21430093383762?preview=3a85610d34450ee5629381e4a9e6e8d9

Hi @mmediaman, Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

Umm, ok, I’m not sure what more information. I followed the guide mentioned as best I could which I am showing at the read-only link and the dropdown disappears when I click on it. Clearly I am misunderstanding the guide. That’s why I was hoping for a little video run-thru of the steps. The instructions seem simple enough so I am surprised that it doesn’t seem to work for me.

In my read-only example, the drop-down I am trying to use the accordion is the section class-labeled as “Food Menu Section”.

Thanks.

Hi @mmediaman!
It seems there’s a few having problems with my dropdown accordion instructions. I did a test myself and apparently there’s something missing in my instructions. I’ll get back to you once I got that sorted :smile:

Okay great. Thanks so much @StevenP. Hope for a resolution real soon. I want to use it as a restaurant food menu.

Firstly! What do you want achieve? Are your intention to stack several dropdowns underneath or just having one?

@StevenP , my intention in this particular case is to create a food menu. The idea would be to have a dropdown to represent each food category and maybe have those within columns. In this way, it can occupy the minimum amount of space for desktops and be responsive to mobile devices with the usual breakpoints at each column.

Desktop:
Food1Dropdown | Food2Dropdown | Food3Dropdown | Food4Dropdown

Mobile:
Food1Dropdown
Food2Dropdown
Food3Dropdown
Food4Dropdown

Thanks

I had a similar issue of trying to implement that and gave up. Instead I built a custom nav menu that has a sub menu within it. Take a look at www.canalalarm.com and click products in the menu.

Thanks @DFink.

The idea though is to be able to expand a menu item and show various type of content, including pictures and text. In your example, it seems to be a simple tree menu.

The @StevenP example clearly shows the desired functionality here: http://webflowcodestutorials.webflow.io/clickdemos/dropdown-accordion

The issue with an accordion on mobile is that you have a set height of the device and when you start unfolding accordion menus, things go off the screen. Thre is no way to scroll either.

Dave, I understand your point about the scrolling issue on mobile, but although I haven’t seen it, would it not be possible to limit the width and left justify the dropdown so that it leaves enough touch space to scroll the page?

I’m thinking dropdown to occupy 90% width of the column and left justified… no? This way it could still qualify as responsive.

No, touch space is not the issue, the nav bar menu is fixed so if you scroll it moves the page behind it but not the links.

If I understand what you are saying, the top of the opened accordion section scrolls out of view. Perhaps I misunderstand, but since touching any other dropdown automatically closes the previously opened dowpdown, would what you describe still be a problem?

@thewonglv has a demo kit with a clean, functional accordion (along with a ton of other stuff you can learn from.) You don’t have to use any “widgets” like the dropdown, navbar, etc… it works like a charm everywhere.

Open up the demo kit to figure out how it was made & then apply it to your project. It’s a pretty simple setup - an interaction on the “accordion content” to hide it initially, then another interaction on the “buttons” to toggle the display/height.

Useful Tip: Use the tab widget for your desktop screens, then hide it on the tablet/phones… Then use your accordion on the tablet/phones (hiding it on the desktop, obviously).

Since you want the “buttons” of your accordion to sit side-by-side on the desktop with the content (I am assuming here from your diagram) to sit in a full width or very wide container underneath ALL your accordion buttons… Then switch the layout to have your content expand/contract directly underneath each button for tablet/phone resolutions. You should follow the advice above.

Thanks for pointing out the demokit @Mogeek. One clarification though, the only interaction I see is on each “acc-SectionWrapper”. And you are right, there are a ton of other neat stuff. For instance, the “Tabs Drawer” looks interesting to use for a food menu. Thanks @thewonglv !

One thing with the @StevenP example is the previously open dropdown automatically closes upon opening another dropdown. I suppose either way could be a feature. WIll have to try to see what controls that in @StevenP example vs. the @thewonglv example :blush:

Will try out the @thewonglv accordion on my own and see if I can make it happen. Is there an easy way to duplicate stuff besides just looking at every element of the read-only example and manually duplicating things? (although I suppose its the best way to lean)

@mmediaman

Can you share your preview-link so I can have a look at your dropdown configuration?

EDIT: I’ve updated the tutorial at http://webflowcodestutorials.webflow.io/click because there were a few properties missing (display: block and display: none) so it should work fine now even thought there’s a jumpy behaviour to it when you open the accordions the first couple times. No clue why they behave like that (at least it they do for me)!

@mmediaman

Here is a demo link to the striped down version of the Tabs to Custom Accordion setup that I put together. You can clone it & see how it was all setup. It uses the WF Tabs widget for the desktop, which is hidden on tablet/phones… Then switches to the custom accordion setup for smaller screens (with this being hidden on the desktop…)

I haven’t put in a good effort yet to get the built in “current” class from the Tabs widget to carry over to the custom accordion. It would require a bit of jquery…

I wish Interactions would give us access to the full set of styles/properties on the style tab somehow, and maybe allow us to add more than one interaction per class/selector. We could easily create our own “current” classes within the WF interface anywhere we need them & do all kinds of awesome stuff. I’ll keep wishing for this feature set & try to work through a bit of custom jquery for now :wink:

And you are right, I tweaked the original demo by William Wong to open/close smoothly with a bit of transition. Forgot about that… I think the original setup just used a single interaction to toggle the display property to show/hide instantaneously.

@mmediaman I’m coming into this thread a bit late but not sure I understand exactly what you are trying to accomplish. If you are wanting the tabs across the top then use the tab element and adjust it for mobile.

You could also just create a custom interaction to hide the “content” by change the height of the content div from 0 to auto. Should maybe take 30 minutes tops to get it set up.

It will take some effort but I don’t think either of these methods would create any major mobile issues.

@mogeek Like the look of your accordion. Took a look at site in designer…what element do you have the interaction attached to? Never mind…I see now you are using the built in tab element :grin:

@JDesign… The problem with tabs on mobile, especially phones is that the WF tabs widget as currently built doesn’t allow you to put html content directly underneath each tab button - which can get weird on phones if you have more than just a few tabs. The end user would most likely be clicking on a button & not seeing any changes in content due to screen real estate (which would most likely be filled up with buttons…)

It’s more of an aesthetic thing but at the same time there are some seriously computer illiterate people browsing the web on their phones who could simply think it’s “broken” or “nothing happened” rather than scrolling down to see the actual content. Then of course, scrolling back up to change the content, etc. Kind of a pain in the ****…

That is essentially what I did for the custom accordion. Go ahead and clone it :wink:

The structure has an “acc_section_wrapper” that wraps both the buttons & accordion content, then a “Personnel” section (i.e. buttons - which are actually just pulled in from the original tabs widget from on the desktop", and finally an “acc_content” section. There are two interactions, the first one is set on the “acc_content” section to initially hide it… the second interaction is the actual show/hide functionality - set on the “buttons”, affecting “acc_content” - limited to sibling elements.

Thanks for all the very helpful replies guys. Will take some time to digest and try them out @Mogeek and @StevenP.

@jdesign to answer your question, what I am trying to accomplish ultimately is a functional restaurant food menu. Although, I can see the method being used for many other applications.