Create a custom accordion

You can create a custom accordion by using a dropdown element and interactions. In this lesson, you’ll learn:

1. How to add a dropdown element
2. How to customize your dropdown toggle
3. How to style your accordion
4. How to create your custom animation‍

How to add a dropdown element

The dropdown element has default built-in actions that make it useful as a custom accordion — it opens the dropdown list when clicked and closes it when a different element or part of the page is clicked. 

You can add a dropdown element to your site by going to Add panel (A) > Elements > Advanced and dragging the dropdown element onto the canvas. 

How to change the default dropdown styles

To use the dropdown in your custom accordion, you’ll need to change the default dropdown element styles. In particular, you’ll need to adjust the width so that the dropdown completely fills the space of its parent element (i.e., whatever element holds the custom accordion). 

Pro tip: Give your dropdown a class (e.g., “Accordion item”) to make your styles reusable. Learn more about styling with classes.

To change the default dropdown styles: 

1. Select the parent dropdown element on the Designer canvas (we gave it a class of “Accordion item” for this example)
2. Go to Style panel > Size
3. Set Width to 100%

How to customize your dropdown toggle

Now, you’ll need to customize your dropdown toggle so it completely fills its parent element (i.e., the element holding it) and hides the content inside of the dropdown list when the accordion is closed. To do this, you can adjust the dropdown toggle’s display and height properties:

1. Select the dropdown toggle on the canvas and give it a class (e.g., “Accordion toggle”)
2. Go to Style panel > Layout
3. Set Display to flexbox to fill the horizontal space
4. Set Align to center to vertically center the text on your accordion
5. Go to Style panel > Size
6. Set a Height value (e.g., 80px)

How to style your accordion

At this point, if you preview your site and click on your accordion, you may notice that the accordion opens, but the default content inside will overlay any content around it. This happens because the default position style for the dropdown list is absolute. For traditional dropdown use cases like in menus or navbars, this is the desired behavior, but you’ll need to adjust the default position for your custom accordion so the content around the element makes room (e.g., slides down or up) when the content inside the accordion expands. 

To style your accordion: 

1. Select the parent dropdown element on the canvas (e.g., the “Accordion item”) 
2. Click the “cog” icon to open Dropdown settings and click “Show” next to Menu
3. Select the Dropdown list element on the canvas
4. Go to Style panel > Position
5. Set Position to static
6. Select the parent dropdown element (e.g., “Accordion item”) on the canvas
7. Go to Style panel > Size
8. Set Overflow to hidden to hide any content that spills outside of the accordion area

How to create your custom animation

Now, you’ll create a custom animation that will both open and close your custom accordion with the following steps: 

1. Create initial actions
2. Animate the accordion opening
3. Animate the accordion closing

Create initial actions

You’ll start by creating 2 initial actions (i.e., styles applied to the element before the page loads) for your accordion.

First, you’ll create an initial action for your dropdown: 

1. Select the dropdown element on the canvas (e.g., “Accordion item”)
2. Go to Interactions panel > Element trigger and click the “plus” icon to create a new element trigger
3. Choose Dropdown opens
4. Click Select an action under Menu opens
5. Choose Start an animation under Custom animation
6. Click the “plus” icon next to Timed animations
7. Give your custom animation a name (e.g., “Accordion opens”)
8. Click the “plus” icon next to Actions to add an action to your animation
9. Choose Size under Miscellaneous
10. Check the “Set as initial state” checkbox under Timing
11. Enter a height value (e.g., 80px) under Size that matches the height you gave your dropdown toggle (e.g., the “Accordion toggle”) in the previous steps
12. Click Save

Next, you’ll create an initial action for the toggle icon: 

1. Select the Icon within the dropdown element
2. Go to the Style panel and give your icon class (e.g., “Accordion icon”) — now you can make the animation affect all instances of the icon
3. Select your parent dropdown element on the canvas (e.g., “Accordion item”)
4. Open the Interactions panel 
5. Select the Dropdown opens interaction you created in the steps above
6. Click the “cog” icon next to the custom timed animation you created in the steps above (e.g., the “Accordion opens” interaction)
7. Select the icon (e.g., “Accordion icon”)
8. Click the “plus” icon next to Actions to create an initial action for the icon 
9. Choose Rotate under Transform 
10. Check the “Set as initial state” checkbox under Timing 
11. Go to Rotate and set the z-axis to 0 degrees
12. Click Save

Animate the accordion opening

Now, you’ll create the accordion opening actions that occur simultaneously when the accordion is clicked — the “Accordion item” size will change to the size of the content inside it, and the “Accordion icon” will rotate 180 degrees. 

To change the size of the “Accordion item” and rotate the “Accordion icon” when the accordion is opened: 

1. Select the parent dropdown element on the canvas (e.g., “Accordion item”)
2. Open the Interactions panel 
3. Choose the Dropdown opens interaction you created in the previous steps
4. Click the “cog” icon next to the custom timed animation you created in the previous steps (e.g., the “Accordion opens” animation) 
5. Click the “plus” icon next to Actions to add an action to your animation
6. Choose Size under Miscellaneous
7. Uncheck the “Set as initial state” checkbox under Timing
8. Go to Size and enter “auto” for the height — this matches the height of your accordion to its content inside 
9. Select the icon (e.g., “Accordion icon”)
10. Click the “plus” icon next to the “Accordion item” Size action you just created to add another action at that timestamp — this ensures that both of these actions animate simultaneously
11. Choose Rotate under Transform  
12. Go to Rotate and set the z-axis to 180 degrees — this rotates the icon so that it points up when the accordion opens
13. Click Save

Note: You can change the easing (i.e., the acceleration and deceleration of the animation transition) of each action. Learn more about interpolation, easing, and smoothing.

Animate the accordion closing

Now, you’ll create an interaction for the accordion closing. This interaction will include the actions that occur when the accordion item is clicked a second time or when a site visitor clicks outside the accordion item — the accordion item will revert to its initial size, and the icon will rotate back to 0 degrees. 

To animate the accordion closing:

1. Select the parent dropdown element on the canvas (e.g., “Accordion item”)
2. Open the Interactions panel 
3. Choose the Dropdown opens interaction you created in the previous steps 
4. Click Select an action under Menu closes 
5. Choose Start animation
6. Click the “plus” icon next to Timed animations to create a custom animation
7. Give your custom animation a name (e.g., “Accordion closes”)
8. Click the “plus” icon to add an action to your animation
9. Choose Size under Miscellaneous
10. Enter a height value (e.g., 80px) that matches the height you gave your dropdown element for its initial state in the previous steps
11. Select the icon on the canvas or in the Navigator (e.g., “Accordion icon”)
12. Click the “plus” icon next to the “Accordion item” Size action you just created to add another action at that timestamp — this ensures that both of these actions animate simultaneously
13. Choose Rotate under Transform 
14. Go to Rotate and set the z-axis to 0 degrees — this rotates the icon back to its initial position so it points down when the accordion closes
15. Click Save

And that’s it! You just successfully created a custom accordion using interactions!