This tutorial will demonstrate how to create accordion effect in an Atomic prototype.
Here is a sample, which you can copy into your own account:
To help with our explanation, let us start by defining a few things:
- Component: a reusable and interactive group of elements. See more on Atomic components here: Atomic components
- Header: the default elements of each component that show when the component is in the collapsed state.
- Body: the aspect that is visible when the component is expanded
- Expanded: when the component is expanded and the header and body are visible
Step 1: Set up the canvas & convert headers into components
In Atomic, lay out all the stacked items of the page in their expanded states.
Next, convert the header for each stacked item into a separate component. Select all of the elements that make up the header of the first stacked item, and then click on ‘Create reusable component’ in the top toolbar, or use the keyboard shortcut ⌘3.
Name the first header
Heading1, the second
Heading2 and so on for subsequent sections.
Open the component by double clicking on it, and rename the page to ‘open’.
Duplicate the page, and rename it to ‘closed’.
Staying on the closed page of the component, add a hotspot over the element(s). On the hotspot add an action to go to the ‘open’ page using ‘Custom transition’ motion, with ease-in-out easing.
Now go to the open page of the component, and add another hotspot which goes back to the ‘closed’ page. Use the same custom transition motion, with ease-in-out easing
You can now test out what you’ve done so far by going into Preview.
Next complete the exact same process for the other stacked item headers.
Finally, for each header component, in the properties panel, set the state to ‘closed’.
Tip: if you wish, you can edit the elements in the two states. For example, in the expanded state of our sample, we have the header background and text change colour, and the arrow point up.
Step 2: Add a scripting component to the prototype
We’ve put the bulk of the scripts necessary to create an accordion effect into a component. Here’s how to add it to your prototype:
Open this share link, and select ‘copy & edit’: FlexboxScript Component
Now select the account and project you are working on, and select ‘Continue’.
Once it has copied into your project, select ‘Done’, and then close that tab.
Finally, go back to your prototype and place the component on the page, but off the canvas out of view. To place a component on your page, select the component icon in the left hand menu, or keyboard shortcut ‘C’. See more here on placing a component.
Tip: Now the component is added to the prototype, the script within it runs by default, but we can turn this script off at any time by changing the state of the component to off.
Step 3: Add each section to a container
We will now put the contents of each stacked section into its own ‘parent’ container.
Select the component header and the body contents for the first section of the prototype. At the top of the screen select Mask.
Rename the container for the 'Header1' component and the body contents for the first section to 'menu1' the second section contents to 'menu2', and so on for subsequent sections.
Step 4: Wrap all containers in a scrolling container
Next we put all of the masked groups from the previous step into a scrolling container.
Select all of the containers, and at the top of the screen select Scroll.
If the height of your sections is greater than your canvas size, resize the scrolling container by dragging the bottom edge up to meet the bottom of the canvas.
To present correctly in preview, the parent containers need to be in reverse order in the layers panel. Reorder them in reverse order now.
Step 5: Add a script to set the starting height of each section
We now need to add a script to run immediately on page load that specifies the starting height of each container.
allContainers = [
Within the script, adjust the starting height for each section to match the closed state (header) height. For example, in our script all three sections are set to 50px.
Step 6: Add component change page actions
We now need to tell the parent containers how much to open and close when selected.
Select the Heading1 component, and add an action for when the component starts changing to open:
adjustHeight(allContainers, "menu1", 186);
And a corresponding code for when it changes to close:
adjustHeight(allContainers, "menu1", -186);
The only difference in these scripts is ‘186’ or ‘-186’ to indicate increasing the size by 186px or decreasing it by that amount.
The height needs to match the size of the section should expand. That is, the height of the body; or the total height of the section, minus the default/closed state height. In our sample, menu1 is 186.
Also, the name needs to match the name of the container. In our example, the ‘menu1’ needs to be changed to ‘menu2’ and ‘menu3’ for the subsequent containers.
Step 7: Find the node ID & and add it to the variable
We now need to add a variable (that connects our script to the area to expand), and assign the node ID from the grandparent container to it.
First we need to identify the unique ‘Node ID’ for the grandparent container: Select the grandparent container, then in the bottom right of the properties panel is the node ID. Copy this into to clipboard.
Next, open the Variables modal, by selecting keyboard shortcut ‘V’, or the ‘Manage project variables’ tool in the left hand toolbar.
Add a variable named
nodeToFlex and paste in the node ID as the value.
Click Save to close the variables modal.
Step 8: Time to preview
We’re all done! Use the keyboard shortcut Command + Enter, or select ‘Preview’.
Select the section headers to test out everything is working. :-)