1. Add shape to the page(it will be the body of the dropdown)
2. Add another shape to this element(it will be the header of the dropdown)
3. Set block position for this shape
4. Set height for this shape(set the value which you want that your dropdown to be when it is collapsed)
5. Add text element into the shape which was added in step 2
6. Change text for this text element(this text will be the title of the dropdown)
7. Add another shape into the shape which was added in step 2(it will be the indicator which show if dropdown is expanded or collapsed. Usualy it is an arrow)
8. Copy the block shape which was added in step 2
9. Paste it to the body of the dropdown which was added in step 1
10. From the copy shape delete the shape which will show status of the dropdown(was added in step 7)
11. Copy shape which was pasted in the step 9
12. Paste it a few times(2-3) to the body of the dropdown which was added in step 1
13. For each copy(which was pasted in step 9 and which was pasted in step 12) change content of the text element(call them e.g 'Option 1', 'Option 2', 'Option 3'...)
14. Select the body of the dropdown(shape which was added in step 1)
15. Set auto height for it
16. Open Animation tab in the right sidepanel
17. Add effect
18. Effect should have 'none' trigger and any duration(speed of the dropdown expaning and collapsing depends from this duration)
19. For the first keyframe remove all properties
20. Add second keyframe
21. Add height propertie for the second keyframe
22. Set the 'px' unit for the height
23. Set the same height value as was set for the dropdown title in the step 4
24. Select the element which show status of the dropdown(element which was added in step 7)
25. Open Animation tab in the right sidepanel
26. Add effect
27. Effect should have 'none' trigger and any duration same as we set for dropdown expanding and collapsingin step 18
28. For the first keyframe remove all properties
29. Add second keyframe
30. Add propertie which you want to animate indictor element(usualy this indicator is an arrow so good propertie for it is rotate)
31. Set the value of the propertie(if propertie is rotate then we should change indicator in the opsosite direction when dropdown expanded and change back when it is collapsed. So we need to set rotate 180 deg to change into the oposite direction)
32. Add name in the layers list for the body of the dropdown
33. Add name in the layers list for the element which show status of the dropdown
34. Select the title of the dropdown which was added in step 2
35. Open Animation tab in the right sidepanel
36. Add interaction
37. Interaction should have 'Click' trigger and 'Aniamtion Keyframe' action
38. Select name of the dropdown body which was set in the step 32 as an animation element
39. Keyframe should be 'Next'
40. Add interaction
41. Interaction should have 'Click' trigger and 'Aniamtion Keyframe' action
42. Select name of the dropdown status element which was set in the step 33 as an animation element
43. Keyframe should be 'Next'
44. Select the body of the dropdown
45. Open Animation tab in the right sidepanel
46. Add interaction
47. Interaction should have 'Initialize' trigger and 'Aniamtion Keyframe' action
48. It should be 'Self' animated
49. Keyframe should be 'Last'
50. Eneble 'Clip Content' for the body of the dropdown
51. Publish
52. Open published url
Result: There is the element which have height which was set in the step 23. This element shows title of the dropdown and dropdown indicator element. Dropdown is collapsed from start because body of the dropdown was initialized with last keyframe in step 49 which change height of the body to the same height as title of the dropdown(step 23). So when page initializing it reducing height of the dropdown from start. Dropdown status element is the same for now as it was created in builder, because this element have no initialize animations. All option of the dropdown(added in step 13) are not visible and only title is visible because height of the dropdown body = height of the dropdown title and everything below this heigh is clipped in step 50
53. Click on the title of the dropdown
Result: Since we added 2 interactions(Steps 36 and 40) for click(Steps 37 and 41) on the title dropdown(step 34) - we see 2 animation after click on it. Since body of the dropdown is initialized with last keyframe(step 49) so after click it should switch to next keyframe(This is set in step 39). So next keyframe after last keyframe is first keyframe because we have only 2(first keyframe = first keyframe, second keyframe = last keyframe). So after click on the title body of the dropdown should switch to their first keyframe which have no propertie(removed in step 19). So if keyframe have no propertie it should switch elemnt to the default value. Default value is the value which is currently set in builder. Body of the dropdown currently has auto height(set in step 15) and since all elements inside dropdown are blocks then dropdown should have the height which hug all this elements. That is why after switching of the dropdown body to default it shows all dropdown options. Since dropdown indicator have no initialize aniamtion - it is on the first keyframe from start which have no properties(removed in step 28) and have default value(same as built in editor). So after click(Set in step 41) dropdown status element should also be switched to next keframe(set in step 43). So next keyframe after first is second = last(because dropdown status element have also only keyframes). Last keyfrma should animate indicator the same as we set in steps 30-31. As in example it should rotate indicator in the oposite direction(180 deg)
54. Click on the dropdown title again
Result: Same as after step 53 there should be again 2 interactions with dropdown body and dropdown indicator. Since in step 53 the body of the dropdown was switched to the first keyframe, after another click on the dropdown title it should switch dropdown body to the next(set in step 39) keyframe which is last keyframe. Last keyframe changing height of the dropdown to the same height as dropdown title. So dropdown boday should be collapsed again. Since in step 53 the dropdown indicator was switched to the last keyframe, after another click on the dropdown title it should switch dropdown indicator to the next(set in step 43) keyframe which is first keyframe. First keyframe of the dropdown indicator have not propertie(set in step 28). It means that first keyframe switch element to the default value(which is set in builder). So if last keyframe rotate element 180 deg, then by default this element should rotate back. So after another click on the dropdown title - the dropdown should have the same view as it was after first openeing in step 52
55. Click a few more times on the dropdown title
Result: After each click the dropdown elements should collapse and expand by switching from last to first and from first to last keyframes