Using an Accordion interaction on your page is a good way to break down page content into manageable parts, giving the page more visual interest for your learner. The Accordion can be used in a variety of ways, e.g. to explain what different departments in your organisation do, or provide a breakdown for different parts of a product.
Adding an Accordion
1. Open the page in your course where you would like to add the Accordion.
2. In Layout, navigate to the position on the page where you would like to add the Accordion and click the Add here button.
3. Select Interactions:
4. Select Accordion:
5. Two Accordion groups will be added to the page by default. Click the Save button to save the changes.
Accordion Settings
In Layout, the settings for the Accordion can be found by clicking on the variations menu on the top right of the interaction:
Under Variations you can control the settings for Icon position and Padding:
The Icon position setting determines where the icon for each group will be displayed within the Accordion tab. The Padding setting determines whether the tabs for each group are compact or not.
In Author, more Accordion groups can be added by selecting the + Add Accordion button on the top right of the interaction:
| Note: Individual groups can be deleted in Author, as well as specific parts of a group that you want to delete for just that group. For example, if you want an image container for group 1 but not in group 2, the image container can be deleted from group 2 in Author. |
Accordion Example
The following example shows a typical example of how a Accordion is often used within a course. The example displays some of the different departments within Elucidat.
In Preview, the Accordion groups will be displayed:
Clicking on the group will display the group’s contents:
