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

這 drop-down element contains default built-in functions that simplify its use as a personalized accordion — it uncovers the 下拉清單 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 新增面板 (A) > 元素 > 先進的 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: 分配一個 班級 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. 訪問 風格面板 > 尺寸
3. Specify 寬度 作為 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 展示 和 高度 properties:

1. 選擇 drop-down switch on the canvas and assign a class (e.g., “Accordion toggle”)
2. 導航 風格面板 > 佈局
3. 放 展示 到 彈性盒 for full horizontal coverage
4. 放 對齊 到 中心 for vertical text centering on your accordion
5. 繼續 風格面板 > 尺寸
6. 定義一個 高度 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 位置 style for the drop-down list is 絕對. 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. 選擇“齒輪” icon to unveil Dropdown settings and tap “展示」 毗鄰 導航
3. 選擇 List Box option on the artboard
4. 導航 設計面板 > 結盟
5. 調整 結盟 到 固定的
6. Pick the ancestor dropdown element (e.g., “Accordion item”) on the artboard
7. 去 設計面板 > 方面
8. 放 Mask 到 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. 選擇 落下 element on the artboard (e.g., “Accordion item”)
2. 導航 Interactivity panel > 元素觸發 並點擊“加” symbol to create a fresh element trigger
3. 選擇 Dropdown expands
4. 輕敲 選擇一個動作 在下面 Menu reveals
5. 選擇 Launch an animation 在下面 Personalized animation
6. 點選“加” symbol adjacent to Scheduled animations
7. Assign a name to your custom animation (e.g., “Accordion expands”)
8. 點選“加” 符號旁邊 活動 to incorporate an action to your animation
9. 選擇 規模 在下面 Various
10. Mark the “Set as initial state” checkbox under 定時
11. 進入一個 高度 value (e.g., 80px) under 規模 that aligns with the height given to your 落下轉變 (e.g., the “Accordion switch”) in the prior steps
12. 輕敲 節省

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

1. 選擇 象徵 inside the dropdown element
2. 前往 設計面板 and label your icon class (e.g., “Accordion icon”) — now your animation can influence all instances of the icon
3. Select your ancestor 落下 element on the artboard (e.g., “Accordion item”)
4. 展開 Interactivity panel 
5. 選擇 Dropdown expands interaction you crafted in the previous steps
6. 點選“齒輪” symbol adjacent to the customized timed animation you crafted previously (e.g., the “Accordion expands” interaction)
7. 選擇 圖示 (e.g., “Accordion icon”)
8. 點選“加” 符號旁邊 活動 to set up an initial action for the icon 
9. 選擇 旋轉 在下面 改變 
10. Mark the “Set as initial state” checkbox under 定時 
11. 前往 旋轉 and dial the z-axis 到 0degrees
12. 輕敲 節省

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 落下 element on the artboard (e.g., “Accordion item”)
2. 解鎖 Interactivity panel 
3. 選擇 Dropdown expands interaction you formulated earlier
4. 點選“齒輪” symbol adjacent to the customized timed animationyou fashioned in the prior steps (e.g., the “Accordion opens” animation) 
5. 點選“加” 符號旁邊 行動 to insert an undertaking to your animation
6. 選擇 尺寸 之內 各種各樣的
7. Deselect the “Set as initial state” checkbox beneath 定時
8. 導航 尺寸 and input “汽車” for the 高度 — this corresponds to the height of your accordion to its content inside 
9. 選擇 圖示 (e.g., “Accordion icon”)
10. 點選“加” symbol adjacent to the “Accordion item” 尺寸 action you just established to append another undertaking at that timestamp — this guarantees that both of these undertakings animate concurrently
11. 選擇 旋轉 下面 轉換  
12. 前往 旋轉 並調整 z-axis 到 180degrees — this rotates the icon so that it directs upwards when the accordion opens
13. 輕敲 節省

筆記： 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 落下 element on the canvas (e.g., “Accordion item”)
2. 揭示 互動面板 
3. 選擇 Dropdown opens interaction you designed in the prior steps 
4. 輕敲 選擇一個操作 下面 Menu closes 
5. 選擇 Start animation
6. 點選“加” symbol adjacent to Timed animations to craft a customized animation
7. Assign a name to your custom animation (e.g., “Accordion closes”)
8. 點選“加” symbol to insert an undertaking to your animation
9. 選擇 尺寸 下面 各種各樣的
10. 輸入一個 高度 value (e.g., 80px) that coincides with the height you allocated to your 落下 element for its initial state in the previous steps
11. 選擇 圖示 on the canvas or in the Navigator (e.g., “Accordion icon”)
12. 點選“加” symbol adjacent to the “Accordion item” 尺寸 action you just crafted to add another undertaking at that timestamp — this ensures that both of these undertakings animate concurrently
13. 選擇 旋轉 下面 轉換 
14. 前往 旋轉 並調整 z-axis 到 0degrees — this rotates the icon back to its initial position so it directs downwards when the accordion closes
15. 輕敲 節省

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