Create a custom accordion

Build a vertical accordion using Webflow's elements and interactions.

This video features an old UI. Updated version coming soon!

In this video lesson, we'll create an accordion style layout for frequently asked questions. When you click on the question, the answer expands. When you click the question again, the answer collapses.

In this lesson

Creating an accordion wrapper — the container that holds all FAQ questions and answers
Creating an accordion item — the parent to each question and answer. This is what you can later duplicate to add more to your FAQ.
Creating the accordion item trigger — holds the question
Creating the accordion item content — holds the answer
Creating interactions for each of these

Creating an accordion wrapper

Let's create our accordion wrapper. We'll drag in a div block. This will hold everything in our FAQ. We'll create a class, and we'll call it accordion wrapper.

Creating an accordion item

Let's create our accordion item. Drag in a div block — this will go inside the accordion wrapper. And once we've placed it inside, we'll create another class, this time calling it accordion item.

Creating the accordion item trigger

Part 3. The item trigger. This will hold our question. We'll put this one inside the accordion item, since each item will have a question and an answer. The purpose of this div block is to be the thing that people click or tap to expand or collapse the answer. So we'll call it accordion item trigger. Let's put a question inside. Now this is up to you: you can use a text block. Or a paragraph. Or a heading. Or an image or a video. Anything. On this page, each of our sections is an H2, so we'll make these H3s. Let's double-click to edit our text, and paste in a sample question we copied to our clipboard before screen recording. But since it's a div block (we're talking about the item trigger here), we can put anything inside. Also, while we're at it, let's change the cursor here. (We'll change the cursor style to pointer, this way it indicates that this part of the accordion is clickable.)

That's the accordion item trigger.

Creating the accordion item content

Part 4 is the content. This is where the answer in an FAQ would live. So we'll drag the div block we're going to use into the the item itself, right under the trigger we created just a moment ago.

And this div block can hold anything — any type of content. So we'll call it accordion item content. (That's what we're naming ours; you can name any of this whatever you want.) And let's set the overflow to hidden, so none of the content hangs over when we build our interaction in just a little bit.

Since this is an FAQ we're building, let's drag in a paragraph. This paragraph can be the answer to the question we pasted in above.

And that's really it. That's our accordion item content.

Creating interactions for each of these

Finally, let's put all this together into something functional. Our interactions.

The key here is the trigger. The accordion item trigger. Let's make sure it's selected, and then we'll head on over to add an interaction. And this is going to occur on the selected element (on the trigger), so we can select click or tap from the dropdown. We'll be doing two different things here: one click to expand our answer and another click to collapse our answer.

Let's create the first animation on our first click. We can name this one accordion open, because that's what we want to do. Now we don't want to animate the trigger itself (that's what's currently selected); instead, we want to animate the content. So we'll make sure to get our content selected. And there are two points here. For the first one, we'll set the size. We'll set the height to zero. That means we're collapsing the content. And since we want the content hidden when the page first loads, let's make sure to set this as the initial state.

We're halfway there on these two points — just need to create one more. Let's affect size again, and instead of typing in a value, we can simply select auto. That's it. So if we hit play, we can see it goes from a zero-pixel height to auto (auto, of course, meaning the size is set based on the content inside).

Let's make a quick change to easing so we can have a bit of a smoother animation. And we'll speed it up — 0.2 seconds should look good. If we hit play, we can see everything looks much smoother.

And one last thing before we're done here: let's not just affect this one element here (this one accordion item content div block). Since we plan to have a ton of questions and answers (a ton of accordion items), let's affect all elements using this class. And since the trigger and the content are siblings, we can only affect siblings with the class. (Otherwise, pressing on one question would show ALL answers to ALL questions.)

If we go to preview mode to check this out, we can see that clicking on the question works perfectly.

Let's build the other part of this: the collapsing effect. If we go back out and create a new timed animation (on second click), we can start building out what we'll call accordion close. And this one's even simpler. We simply want to return the content to its zero-pixel height. So we'll set the height to zero pixels. This will collapse the answer — the answer in our FAQ.

Same thing here: we'll change our easing — we'll set something a little gentler here. And we'll change our duration again. Just type in our value of 0.2. And just like the accordion open animation, we'll make sure this affects every accordion item content div block (that's a lot of words) that has that class applied, so long as it's a sibling of the trigger.

And as a final note to make this work before we move forward: let's close out of the animation and make sure our trigger (the trigger itself — the mouse click) affects everything that has the same class applied on the trigger (accordion item trigger).

If we go to Preview mode? It works perfectly. Open, close, open, close.

Ready to add some more items? Just select the accordion item and duplicate (here we're just copying then pasting a bunch of them). Let's go into preview again. And you can see you can open whatever you want...and close whatever you want.

That's it. That's the core functionality of an accordion.