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: 

https://app.atomic.io/d/QOz4DlUFfgON

If you’re looking for an example that does not involve using any JavaScript, check out our tutorial on creating an accordion using components

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. 

Add a Timer based page action (at 0ms) to run the following JavaScript:

allContainers = [
{
   name: 'menu1',
   currentHeight: 50
},
{
   name: 'menu2',
   currentHeight: 50
 },
 {
   name: 'menu3',
   currentHeight: 50
 }
]

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. 

To do this, we add a page action that runs one line of Javascript each time the component opens or closes. We call this a ‘component change’ page action. 

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. :-)

Did this answer your question?