Create an accordion dropdown arrow

In this lesson, you'll learn how to create an interactive dropdown arrow that you can add to your dropdown and accordion triggers.

Before getting started

• Learn how to create a custom accordion
• Also, check out how to create a custom dropdown menu

In this lesson

1. Add and style the arrow
2. Create the animation
3. Set the affected class

Add and style the arrow

Pretty simple here. You can use any element for this — we're using an image. And this is our down arrow. We'll drag it into the accordion trigger, right underneath the question we have here in the navigator (the H3). And we'll let go.

Let's go over and create a class (we'll need this for the interaction). And we'll affect size. We can eyeball it here (holding down shift and using the up and down arrows to skip by 10 each time).

And then we can copy that element (copy the arrow) and paste it after the other headings in our accordion. (Since they have the same class, making a style change on one of them, of course, will affect all of them.

Create the animation

But that's the first part. Let's create the animation. Now the thing that's triggering the whole interaction is the accordion item trigger. So with that selected, let's go over and add something to the existing trigger. This occurs on mouse click (or tap). And there are two states: first click and second click. On first click, let's go into our open animation. And since the arrow is pointing down, all we have to do is add one action (this occurs at the same time as the content animates in). We're going to rotate. And we'll do this to the tune of 180 degrees. That way it's pointing up.

And to match the rest of our animation, let's affect easing (we'll set the animation curve to ease) — and let's drop the duration a little bit (set a lower number).

If we press play to preview, it works great. Let's close out of this and do the opposite in the close animation. We'll go in and add another point at the same time as the existing action. We'll rotate...but this time we'll reset that rotation. We'll set it to zero. That means it'll return to its original value. Let's affect the easing (we'll choose ease again) — and let's drop that duration.

If we go into preview mode to see how all this works, we can see that the first question slides out and the arrow rotates — exactly as expected. But what about the second? And the third for that matter? Not so good.

Set the affected class

Let's move on to setting the affected class. Really simple. Since this animation is occurring on the accordion item trigger, for the first and second click, we only want to affect children of that trigger. (The arrow is a child of the trigger.)

So what we’ll do (we’re in our first click) — what we’ll do is select our action here that’s affecting the arrow. We’ll set it to affect not the selected element; but the class. And to be specific, we want this to apply to children of the trigger.

We’ll go out once we’re done, and we’ll proceed to do the same thing for the second click. We’ll select our down arrow, and we’ll make sure this is affecting the class — the down arrow class. And we’ll choose children of that trigger since the arrow is a child of each trigger.

And that's how to animate a down arrow to become an up arrow.