How to Create an Accordion Effect

I found a nice & easy way to create an accordion effect in webflow, and style it at will.

The idea is not mine, it is directly based on this wonderful work, which I thought was worth sharing:

Here’s the process in webflow - dont’h have time for a video tutorial, I hope this will be eough:

  • Create a form block
  • Inside this block, create a wrapper div, let’s class it as “accordion-wrapper”
  • Inside the wrapper, insert a few radio buttons (each one will be one of the accordion “boxes”
  • Change the radio button style so they are not displayed - only keep the label visible, and format it as you wish
  • Below each radio button label (inside the “Radio Button Field” wrapper), create a DIV (named “accordion-item” for instance), and put whatever you want inside: this is your accordion contents. Style it as you want, just make sure you have overflow:hidden.

Structure should look like this:

Once this is done, you can move the whole accordion-wrapper out of the unnecessary form, and get rid of it.

To activate the magic, just add this custom code:

<style>
.accordion-item { max-height: 0; }
input:checked ~.accordion-item { max-height: 100%; }
</style>

And enjoy.

Since this we are using the max-height property, the transition can be controlled, but only if you can set an actual pixel value to max-height (instead of the 100%).

Hope this can help some.

1 Like

Is there an advantage of this over just using interactions?

I have not found any other simple way to create an accordion the way I wanted - where only one panel is open at a given time. Other forum recommendations for accordions are jquery UI, I did not find a way to do it with interactions.

1 Like

Hi @Yann, have you checked out the Demo Kit site ? There are lots of examples:

Site: https://webflow.com/website/Demo-Kit

Folder: Interactive Elements

Page: Accordion

Check that and see if it helps to show how to create an accordion using interactions

Hi cyberdave, This is exactly what i am look for, how can I get it in my own site?
How do I build one myself?

Ta
Simon

Hi @simonjelks, the page in the demo kit is just a reference, you would need to recreate that in your own site. My recommendation is to create a blank site, then open the read-only demo kit page, and recreate all structure and interactions for that.

If you get stuck, then you can post the link to your test site here on the Need Help pages for additional help. I would create a new post for that.

I hope that helps !

Thanks for (very) prompt reply.
Have now had a go at making an accordion by following this guys tut : How to create an accordion menu using webflow? - #13 by mindymlin - Animations & Interactions - Forum | Webflow, but have no interaction choices under my settings icon??

I have selected ‘Accordion Wrapper’ and here is a screen shot of ‘Settings’:

Interactions are not under settings. They are on that ‘cube’ looking icon.

If you don’t know where they are, then you are probably going to have a very hard time following someone else’s setup. I would seriously consider doing the interactions course first at this point! http://tutorials.webflow.com/courses

AH! Thanks DragonDon, Looked a few webflow tutorials and they are all saying its under ‘settings’, .They must have changed it

Yeah, you;ll notice that a lot. There will be a ‘webflow’ update which changes menus but they won’t update the tutorials. I can understand why but I think some sort of footnote or something should be added, if at least to the page where the tutorial is, saying that there has been a change in item location or such. Still, even that’s a lot of work. So, this is the nature of the beast. We just have to move along and develop the skill of ‘knowing that change is inevitable’ :smiley:

Hi, I recreated an accordion from the Demo-Kit (https://webflow.com/website/Demo-Kit) on my own site.

Everything works fine but as you can see on the demo, an opened accordion box stays open if you click another one.
Is it possible to close all other boxes if a new accordion element is clicked? So that only one opened box is visible at the same time?

Thanks for your help.

Hi Georg, I quickly created an auto-closing accordion menu on my demo site, check it out and see if it’s what you’re looking for.

4 Likes

Awesome solution! Would be great to share this on the /discover section and maybe put a link to your Designer Preview link on http://od-webflowtips.webflow.io/menus so people can see how you built it.

Thank you! I’ve just showcased the website like you suggested (I’m assuming that’s what you were referring to), and I’ve also added the share link to each page so no matter which one they are on they can get to the designer preview quickly.

Hi oramsdesign,
thank you very much for your solution. I got my accordion to work this way.