How to create an accordion menu using webflow?

Hi Steve your article was a big help but am having abit of an issue, when i click on one of the accordions all of them are activated heres a link you can take a look at https://icealion.webflow.io , your help will be much appreciated thanks

Hi, I was wondering if you could help me out, I’m trying to use this version you had listed but how do I style it as I would be using it as an embedded link.

Depends on the situation! Can you elaborate a bit more on that as well as give me a preview-link to your project?

This worked great…for the first accordion I put on the page. When I repeated the section to add in a second accordion, the formatting vanished. :?

Work was on all done on the “Expertise” page. Live version http://rga.webflow.io/expertise

Preview link: https://preview.webflow.com/preview/rga?preview=a4e479b199d1d0dd6e9fd0bc821a6294

This was my first time really using jquery. I even just simply made a direct copy of the embeded html to see if I made a typo somewhere but that’s not the case. I suspect there needs to me some sort of adjustment to the embeded html to say 'this is ANOTHER copy…" or something like that?

I essentially want to have 3 sets of accordions on this page.

@DragonDon

There’s a much simpler way to create accordions natively in Webflow and have total controll over the styling instead of using external jQuery; use the Webflow Dropdown widget!

Here’s a live preview-link of my “start-kit” I use when I start a new site. Go to page “Components” and scroll down a bit until you reach the accordions (blue colored).

https://preview.webflow.com/preview/newwebsiteframework?preview=3854bf8b472ff367ad0f5fe89a585763

Just take a look at the structure of it and the interactions. Very simple to set up and works great!

Just reach back to me if you have questions :slightly_smiling:

2 Likes

Thanks @StevenP, going to give it a shot right now.

Hi @StevenP,

Ok, I mostly got it but a few things.

1/ I don’t have the ‘smooth’ open/close that yours does.

2/ I noted that my ‘accordion text’(you have accordion-link) has a style applied to it that yours does not. (style is not the right term here but my ‘position’ is highlighted as a change where yours is not.

Mine: http://puu.sh/o5Zhj/fdc24fe1e1.png

Yours: http://puu.sh/o5ZHw/442724d55a.png

Any suggestions would be greatly appreciated!

Share link: https://preview.webflow.com/preview/rga?preview=a4e479b199d1d0dd6e9fd0bc821a6294

Live Page: http://rga.webflow.io/expertise

Hi!

  1. Well, the simple answer to why your accordion is not as smooth as mine is that you haven’t set any interactions to it.
    See my link again how it’s set up - it’s really nothing special, just some display:block/none and a height value.

  2. Your styling of “Accordion text” is entirely up to you. I did leave my links unstyled simply because it was not needed for the purpose (the animation and smoothness of the dropdowns closeed/opened states is what matters here).

One tip though: When styling your accordion content (in your case, “accordion text”) wrap it in a div called “Accordion Content” (or what you want to call it) and they set all styling on that div. If you apply styling values that affects position, like padding, to the List element (“accordion list”) you’ll get a stuttery motion when closing the accordion. So avoid that.

Remember also to set your List element (“accordion list”) to overflow hidden. If not, your content will bleed through and it doesn’t look very nice.

Hope this helps :slightly_smiling:

Hi @StevenP

Thanks for the reply.

Problem is, there is some confusion. You can’t put a DIV inside an accordion, according to the error message I get when I try to wrap the ‘accordion text’ only. So I put the whole ‘accordion’ inside a DIV and when I applied the styling(that I followed from here Dropdown Transition) the whole DIV dissapears. Sigh.

I’ll try following your interactions instead.

@StevenP

Well, this is getting mildly irritating.

1/ The open transition is not working. There is no delay/slow open.

2/ The arrow rotation seems to be flakey. Sometimes it work, other times it rotates 360 instead of 180.

So let’s try this again. Which element should the transition be applied to in the following picture:

http://puu.sh/o73S7/8a2b0916f1.png

Then maybe I can figure out why the transition is not working(at all it seems).

I created a DIV block (accordion-content) and applied the interaction there but saw no function working. I applied it to the ‘accordion’ drop-down element, and still things just aren’t working.

You have your interaction on your ‘accordion-toggle’. This seems to imply that a ‘text’ drop-down has different issues that a ‘link’ drop-down. So where do I go from here?

Okay, maybe I was a bit unclear…my bad! The “accordion content” should be placed in side your “accordion list”. Then, put all your paragraphs, headings and whatever inside that “accordion content”-div.

The interaction should be placed on the toggle-element (“accordion-toggle”). In that interaction we need to change some bits:

  1. Currently you have set “Affect different element” to “Accordion”, but should be changed to “Accordion-list” (since that is the element we want to open).

  2. The first step (“Display; Block, Height…”; Remove any transition time there. Now it’s at 500ms. Put it to “0ms”.

  3. The second step (“Height 0px”; Set that to the same transition time value as the thirds step ("Height: auto). 500ms.

  4. You still have a stuttery opening and closure and thats because you have some padding applied to the “accordion-list” element when its open. Remove all padding from the “accordion-list” when its in open state. As I stated in the previous post, apply all positional styling to the accordion content.

  5. Set the trigger for the arrow to “Limit to nested elements” instead of “Limit to sibbling elements”.

Problems should be solved…:slight_smile:

@StevenP Thanks dude! that works wonders.

Two things though. You mentioned that I still have ‘padding’ in the ‘accordion-list’ but that is not so:

http://puu.sh/o8k9i/421b951ffa.png

I do have a bottom padding on the accordion-text element (inherited from the paragraph element), is that what you mean?

Regardless, there is no stuttering now. The only other oddity is that the padding changes when I close the list.

Yes you still have padding on your accordion-list - when it’s open. Click “Open Menu” on the Dropdown settings, select your accodion-list and then you’ll se your 5px padding. That’s causing your Paragraph to jump a bit when you close your dropdown. Remove it and that issue will be solved.

1 Like

Ah, I see it now. thanks.

Actually, I just added it to the ‘non-open’ menu so that it looks better. Thanks again dude! So damn helpful!

1 Like

Glad it got solved for you :slight_smile:

Thanks StevenP for sharing your work on accordion functionality. I was inspired by your work and created a version that hides the content div using Display: None instead of setting the height to 0. I also set Display: None on the Initial Appearance, so all the content is easy to edit for content authors.

Here’s a link to check it out: https://preview.webflow.com/preview/accordion-prototype?preview=46d3048b1a1bf0119679a80b78f8f097

The second page on the site it an attempt to create an interaction-only accordian that closes an open panel when another opens. It kinda works, but after clicking through all the panels it starts to need two clicks to get the expected behavior. Any ideas?

1 Like