Create a custom accordion

Today, we'll create an accordion-style layout for frequently asked questions. We’re doing this mainly to tinker and explore how we can control specific elements with Interactions, but if you’re looking to just quickly grab a working accordion, we've included a link to this down below. Use it to copy and paste it into your own project, or just to get inspired or deconstruct it.

First - we’ll begin by using the native Dropdown element. Then, we’ll customize our toggle (the thing that will hold our question). We'll make some style changes to our accordion answer. And finally, we'll create a custom trigger (the animation that makes it all work). 

So. Let's do this. Let’s create our accordion. And our goal is this: when someone clicks on a question, we want our accordion to snow the answer below it.

Over in our project? We'll drag in a Dropdown element. Using this element is pivotal for what we’re building for this reason: this particular element has default Dropdown actions (we can use these to our advantage). Let’s preview it (let’s see what it does). Click in on the dropdown and it opens. Click outside of it and it closes. To turn this into an accordion, there are some changes we need to make.

Before we get there, with our dropdown selected, let’s add a class name. Of course, we can call it anything we like.

Classes let us reuse styles (that we’ll create for this element). And since we want it to completely fill this (the whole area)? Let’s add 100% to the width. The item fills out all this space (everything available in its parent element).

Part one complete. 

Part two? Our toggle. Let’s customize it.

And what we wanna do is have our question here, and it’s what someone will click on to reveal the answer. 

For OUR project, we want our answer and toggle to fill out this space to match the expected behavior (making this entire area clickable) so, we’ll need to change the default. 

Another class here - this time calling it something like “accordion toggle,” but you can name it anything you like. Change the display setting to flexbox. Now it fills the space.

One thing to note, as we build we’re preparing our dropdown to collapse. And we want our interaction to collapse behind the toggle (to hide the answer). Since we need that let’s add height here that we'll later use to hide that answer (maybe 80 pixels).

As you already know, this toggle will hold our question. So. Let's put a question inside. What this is is up to you. You can use a text block or a heading or a video. A lot works here. So. Double click to edit the text: What is the meaning of life? Question added. 

That’s part 2. 

Now part 3. And before we jump in, let’s preview our progress. Our accordion opens, but the default content spills out of it. Of course, that’s not what we want. But, this happens because the default for the dropdown list is set to position absolute. This is great when used in a navbar (like creating a dropdown menu, or meganav). That’s what this element was made for.

But we want to break those rules. Instead, we want our answer to take up space and not be removed from the document flow. So, we'll make two changes with here with our dropdown list selected.

Let’s go over in our Style panel. In our position, let’s change from absolute to static. And second, change the display setting from none to block. While we're at it, let's match the padding of our answer to the padding of our toggle and we can make the background whatever we like by changing the default (we can make those changes to our background). 

The trigger (the accordion item). Let’s set this to overflow: hidden, and that's a major point here: because we will want to hide content that spills outside of this area. 

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

Let's put all this together into something functional with an interaction. The key here is the accordion item. Let's make sure it's selected (here in the Navigator) to make it our trigger. Over to our Interactions panel. 

Since we’re using a Dropdown element we can select a trigger specific to it “Dropdown opens,” here. And we'll be doing two different things: menu opens and the accordion item expands, and menu closes to collapse our answer. 

Let's create the first animation when the menu opens. We can name this anything we like. As we know, we want to animate the trigger itself.

And, that's what we want to make sure is currently selected in the Navigator. So we'll go in and add an action to set the size, we'll go down and set the height here to 80 pixels. This means we're collapsing the content to the same size as the toggle (we know the toggle is 80 pixels tall). And since we set the overflow to hidden, the answer won’t be shown initially (and that’s why we set it to overflow: hidden). Speaking of initially - let’s set this step as our initial state (so that it’s initially closed).

Now, to really customize our accordion let’s spin the dropdown icon (the arrow, here) when it’s opened. This isn’t required, but it is a common interaction seen with accordions to show it can be collapsed after it’s opened, but you can animate this however you like.

With the icon selected. Let’s add a rotation with this initial action. And, we’ll set the initial z-axis rotation (we’ll spin it from here) to 0 degrees (this is where it’ll start). But, there’s something wrong with this - we’re only affecting this element. If we reuse this interaction on other FAQs, it will only work for this one.

Let’s get out of the interaction and add a class name to our icon (so that the interaction will affect any child with that class name). (All we have to do, is name that class).

And after we do? We’ll just select the accordion item again - to make sure we’re able to access that interaction. Of course, back in Interactions, we can see it right there. So let’s go back to finish the job we started.

Change the action from this selected element to class? Yes. And let’s make sure we set this because we want to make sure this dropdown animation affects “Only children with this class.” That’s our option. The trigger (the accordion item) - we want it to rotate the icon only for icons that are inside of it.

Okay. Let’s finish this. Over in the Navigator, let’s select our accordion-item. And let’s add an action (a size animation) to open the accordion. Auto does this for us: it lets this element expand based on the contents - automatically). And, with our icon selected, here - let’s add to our size action (let’s add an action at the same point as our SIZE action) - and we’ll set the rotation to 180 degrees on the z-axis (that’ll spin it).

If we Preview this, now? As expected - clicking on the question works perfectly. Let's build the other part of this, the collapsing effect.

Let’s back out from here, and create a new animation on menu close. We can start building out what we'll call “Accordion close,” (or any name we like) and this one's even simpler.

With the Accordion item selected, we’ll set the size (the height of it) to match (80 pixels, here). And with the icon (accordion icon) selected - we’ll set the rotation to 0 degrees on the z-axis.

If we go to preview mode, it works perfectly. Open. Close. Open. Close. Need to add some more items - select the accordion item here in the Navigator. To copy, let’s hit Command C on Mac (Control C on PC), and then Command V or Control V to paste and we’ll paste this a total of three times.

Back in Preview. You’ll notice now that opening one and then clicking to open another - automatically closes it. And that’s important - the DROPDOWN element automatically does this for us. That's it. That's the core functionality of an accordion.

So. We covered creating a custom accordion using the Dropdown element, then walked through how to customize our accordion toggle (which holds our question), we customized our accordion answer (the answer that drops down beneath our question). And finally, four, we created a custom accordion trigger (that animated when someone clicks on the question).

Will I build this from scratch each and every time? No. I’ll be copying and pasting. So check out Grimur’s lesson on copying and pasting between projects if you haven’t already seen it.

But for those of us who want to build from scratch, and for those of us who want to better understand how these things are put together, this is one way to create a custom accordion in Webflow.