This tutorial will demonstrate how to create accordion effect in Atomic using components.

Here is a sample, which you can copy into your own account: 

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

If you’re looking for an example that involves scripting, check our tutorial on creating an accordion using JavaScript.   

This technique has the nickname of the ‘Russian doll’ (or ‘Matryoshka doll’), as it utilises a technique where an expandable component is embedded within another, which is then embedded within another, until the desired number of stacked items is achieved.

To help with our explanation, let us start by defining a few terms:

  • 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.
  • Collapsed: when the component is collapsed and only the header is visible.
  • Expanded: when the component is expanded and the header and body is visible.

Step 1: Add the elements for the lowest section

Set the dimensions of your page in the properties panel dropdown menu to a preset mobile, tablet or desktop. 

We’ll start by adding the elements for the lowest of the stacked items — for example, in our sample the ‘Minerals’ aspect.  

Add the content for the body of the section onto the canvas, and then the content for the header as you would like it in the expanded state. 

In the layers panel, it is important that the header content is above the body so that the body transitions behind the header when it goes to the collapsed state. We achieve this for each level by adding the header after the body, or manually adjusting them in the layers panel. 

Tip: if you have any footer content that you’d like at the bottom of the lowest component, include it here also. 

Select the elements and then click on ‘Create reusable component’ in the top toolbar, or use the keyboard shortcut ⌘3.

Name the component the last level that you are making. In our example there are three levels, so we’ll name it ‘menu3’. 

Step 2: Duplicate the page and add interactivity

Open the component by double clicking on it, and rename the page to ‘expanded’. 

Duplicate the page, and rename it to ‘collapsed’. 

Now we need to move content on the ‘collapsed’ page to match a collapsed state. We do this by moving the body up (and behind) the header. 

Tip: to ensure a smooth transition, keep the header content in the same position. 

Staying on the collapsed page of the component, add a hotspot over the header element(s). On the hotspot add an action to go to the ‘expanded’ page using ‘Custom transition’ motion, with ‘Ease in-out’  easing.  

Now go to the expanded page of the component, and add another hotspot which goes back to the ‘collapsed’ 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.

We will now complete a similar process for other stacked items above this one. 

Tip: if you wish, you can edit the elements in the two states now. For example, in the expanded state of our sample, we have the header background and text change colour, and the arrow point up. 

Back out of the component, so you are at the top level of the prototype. 

Step 3: Add another stacked component 

Above the last component you made, add the body and header for the next component in the expanded state. 

Now select these new elements, and the component(s) below and make another component by clicking on ‘Create reusable component’ in the top toolbar, or use the keyboard shortcut ⌘3.

Name the component depending on the level, e.g. ‘menu2’ or ‘menu1’. 

Step 4: Duplicate the page and add interactivity

Open the component by double clicking on it, and rename the page to ‘expanded’. 

Duplicate the page, and rename it to ‘collapsed’. 

As we did previously, we now need to move content on the collapsed page to match the collapsed states. Do this by moving the body of this component up — and all components below it — until the header/top of the component below is in the correct position. 

Staying on the collapsed page of the component, add a hotspot over the header element(s). On the hotspot add an action to go to the ‘expanded’ page using ‘Custom transition’ motion, with ‘Ease in-out’ easing.  

Now go to the expanded page of the component, and add another hotspot which goes back to the ‘collapsed’ 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

Repeat as necessary

Repeat steps 3 and 4 for each additional stacked item you would like to add to the prototype.

In our example, we do this one more time, for a total of three levels. 

Step 5: Add a scrolling container

Page on the top page level, select all of the elements on the canvas, the select ‘Scroll’ in the top menu, to create a scrollable container. 

Resize the boundary of the Container to the scrollable region on your page. The contents of your Container need to be clipped to enable scrolling.

Step 6: Preview & test

Test things out in preview mode (by selecting ‘Preview’ down the bottom right, or keyboard shortcut Cmd + Enter).

Did this answer your question?