Accordion Interactions in eLearning

Introduction image of an accordian interaction. Main accordian fold shows raspberry tart with description underneath.

This week’s eLearning Challenge is #147, Accordion Interactions. I’ve recently been binge watching The Great British Bake Off, so I immediately thought of using the accordion layout for a recipe. This layout improves the content since it only displays as much information as the learner (in this case baker) needs at that moment. I decided to do a horizontal accordion layout that goes from side to side since it would be reminiscent of a cookbook.

The Method

I started out by creating my layouts on four different slides. Besides the basic layout, I also wanted to incorporate animations. I tried using transitions to see if that would be useful, but it wasn’t quite right. I decided to use a technique I saw in Jeff Kortenbosch’s Animated Menu Demo to create a really smooth experience.

On each content slide, I created three layers. On each layer, I had the accordion slide change color to indicate that it was clicked, then added in motion path animations to move the accordion tabs to the correct position.

I was then able to add in triggers. On the slide, there were three triggers that opened a slide layer.

Three triggers on main slide

On each of these layers, there are triggers to move one or more tabs on a motion path, then jump to a slide once they’ve finished. I had both the layer timeline and motion path animation set to one second each.

Triggers on slide layer that animate accordion fold and move to a different slide


I did struggle with placing the motion path animations. There’s no precise way to tell Storyline where objects should end up; the size and position page only works for the object itself. To help with this, I created a grid structure on the Slide Master that marked the middle of the accordion tabs. Once I was done adding in the animations, I just flipped off the visibility of the grids.


Guidelines on master slide used to line up motion paths

The Result

Click here to see the full interaction. Click here to download the Storyline 2 source file.


Leave your comment