Develop a bespoke accordion

Crafting a personalized accordion involves utilizing a dropdown element and interactions. This tutorial will cover:

1. How to insert a dropdown element
2. How to customize your dropdown switch
3. How to design your accordion
4. How to produce your bespoke animation‍

How to include a dropdown element

The drop-down element contains default built-in functions that simplify its use as a personalized accordion — it uncovers the drop-down list upon click and conceals it upon clicking a distinct element or part of the page. 

You can integrate a drop-down element into your website by navigating to Add panel (A) > Elements > Advanced and dragging the drop-down element onto the canvas. 

How to modify the default drop-down styles

To incorporate the dropdown in your personalized accordion, you must adjust the default dropdown element styles. Particularly, you ought to modify the width to ensure the dropdown occupies the entire space of its parent element (i.e., the element containing the custom accordion). 

Bonus tip: Assign a class to your dropdown (e.g., “Accordion item”) for reusability in styling. Explore more about styling using classes.

To adjust the default dropdown styles: 

1. Choose the parent drop-down element on the Designer canvas (we designated it a class of “Accordion item” in this instance)
2. Visit Style panel > Size
3. Specify Width as 100%

How to personalize your drop-down switch

At this moment, you need to personalize your drop-down switch so it completely fills its parent element (i.e., the container) and conceals the content within the drop-down list when the accordion is closed. To accomplish this, tweak the drop-down switch’s display and height properties:

1. Select the drop-down switch on the canvas and assign a class (e.g., “Accordion toggle”)
2. Navigate to Style panel > Layout
3. Set Display to flexbox for full horizontal coverage
4. Set Align to center for vertical text centering on your accordion
5. Proceed to Style panel > Size
6. Define a Height value (e.g., 80px)

How to design your accordion

After this stage, if you test your site and interact with your accordion, you might observe that the accordion unfolds, yet the default content within may overlap surrounding content. This occurs because the default position style for the drop-down list is absolute. While this is the desired behavior for conventional drop-down usage like in menus or navbars, for your personalized accordion, you must alter the default positioning so the nearby content adjusts (e.g., shifts down or up) when the content inside the accordion expands. 

To innovate your accordion: 

1. Choose the parent drop-down element on the canvas (e.g., the “Accordion item”) 
2. Select the “cog” icon to unveil Dropdown settings and tap “Show” adjacent to Navigation
3. Choose the List Box option on the artboard
4. Navigate to Design panel > Alignment
5. Adjust Alignment to fixed
6. Pick the ancestor dropdown element (e.g., “Accordion item”) on the artboard
7. Go to Design panel > Dimensions
8. Set Mask to concealed to mask any content that goes beyond the accordion area

Steps to design your personalized animation

Now, create a unique animation that will handle both opening and closing your custom accordion with these steps: 

1. Establish initial actions
2. Animate the accordion expansion
3. Animate the accordion closure

Establish initial actions

Initiate by crafting 2 initial actions (i.e., styles applied to the element before page load) for your accordion.

First, initiate an initial action for your dropdown: 

1. Choose the dropdown element on the artboard (e.g., “Accordion item”)
2. Navigate to Interactivity panel > Element trigger and tap the “plus” symbol to create a fresh element trigger
3. Opt for Dropdown expands
4. Tap Choose an action under Menu reveals
5. Opt for Launch an animation under Personalized animation
6. Tap the “plus” symbol adjacent to Scheduled animations
7. Assign a name to your custom animation (e.g., “Accordion expands”)
8. Tap the “plus” symbol next to Activities to incorporate an action to your animation
9. Opt for Magnitude under Various
10. Mark the “Set as initial state” checkbox under Timing
11. Enter a height value (e.g., 80px) under Magnitude that aligns with the height given to your dropdownswitch (e.g., the “Accordion switch”) in the prior steps
12. Tap Save

Following that, initiate an initial action for the switch icon: 

1. Pick the Symbol inside the dropdown element
2. Head to the Design panel and label your icon class (e.g., “Accordion icon”) — now your animation can influence all instances of the icon
3. Select your ancestor dropdown element on the artboard (e.g., “Accordion item”)
4. Unfold the Interactivity panel 
5. Choose the Dropdown expands interaction you crafted in the previous steps
6. Tap the “gear” symbol adjacent to the customized timed animation you crafted previously (e.g., the “Accordion expands” interaction)
7. Choose the icon (e.g., “Accordion icon”)
8. Tap the “plus” symbol next to Activities to set up an initial action for the icon 
9. Opt for Rotate under Alter 
10. Mark the “Set as initial state” checkbox under Timing 
11. Head to Rotate and dial the z-axis to 0degrees
12. Tap Save

Animate the accordion expansion

Next, set up the actions for expanding the accordion that occur simultaneously when the accordion is clicked — the “Accordion item” size will adjust to the content size within it, and the “Accordion icon” will turn 180 degrees. 

To alter the size of the “Accordion item” and rotate the “Accordion icon” upon accordion opening: 

1. Choose the ancestor dropdown element on the artboard (e.g., “Accordion item”)
2. Unlock the Interactivity panel 
3. Select the Dropdown expands interaction you formulated earlier
4. Tap the “gear” symbol adjacent to the customized timed animationyou fashioned in the prior steps (e.g., the “Accordion opens” animation) 
5. Tap the “plus” symbol beside Actions to insert an undertaking to your animation
6. Opt for Size within Miscellaneous
7. Deselect the “Set as initial state” checkbox beneath Timing
8. Navigate to Size and input “auto” for the height — this corresponds to the height of your accordion to its content inside 
9. Pick the icon (e.g., “Accordion icon”)
10. Tap the “plus” symbol adjacent to the “Accordion item” Size action you just established to append another undertaking at that timestamp — this guarantees that both of these undertakings animate concurrently
11. Choose Rotate beneath Transform  
12. Head to Rotate and adjust the z-axis to 180degrees — this rotates the icon so that it directs upwards when the accordion opens
13. Tap Save

Note: You have the option to modify the easement (i.e., the acceleration and deceleration of the animation transition) of each action. Obtain more information regarding interpolation, easement, and smoothing.

Animate the accordion closing

Next, you’ll establish an interaction for the accordion closing. This interaction will contain the undertakings that transpire when the accordion item is pressed a second time or when a 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. Pick the parent dropdown element on the canvas (e.g., “Accordion item”)
2. Reveal the Interactions panel 
3. Opt for the Dropdown opens interaction you designed in the prior steps 
4. Tap Select an action beneath Menu closes 
5. Select Start animation
6. Tap the “plus” symbol adjacent to Timed animations to craft a customized animation
7. Assign a name to your custom animation (e.g., “Accordion closes”)
8. Tap the “plus” symbol to insert an undertaking to your animation
9. Opt for Size beneath Miscellaneous
10. Input a height value (e.g., 80px) that coincides with the height you allocated to 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. Tap the “plus” symbol adjacent to the “Accordion item” Size action you just crafted to add another undertaking at that timestamp — this ensures that both of these undertakings animate concurrently
13. Opt for Rotate beneath Transform 
14. Head to Rotate and adjust the z-axis to 0degrees — this rotates the icon back to its initial position so it directs downwards when the accordion closes
15. Tap Save

And that concludes your successful creation of a unique accordion using interactions!