Accordion Component

The Accordion component lets the learner interact to get more information about the topic.

This article provides an overview of the Accordion component, component setup and behavior, and examples of Accordion component configurations.

Component overview

For each Accordion component item, you can choose to display only text or text and some media. It is also possible to select where to place the media for each Accordion component item.

The Accordion component is fully responsive.

Component set up

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General & Behavior sections

In the General section:

Add Title and an Display Title, as needed, that should appear on the Accordion component. Only the Display Title is seen by learners.

Add your Body. Use the text editor to style and format your text.

1. Add Instruction Text that tells users how to use the component.
2. Add an Aria Label for screen readers, as needed.

In the Interaction Label section:

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Accordion component. This widget can display an icon and label prior to the Accordion component completion, which changes to a different icon and label once the Accordion component is completed.

In the Behavior section:

In the Behavior section, you can enable to keep items open until they are manually closed.

In the Appearance section:

In the Appearance section, you can enable to show a check icon on visited items.

Add Component Items

In the Items section you add Items to your Accordion component.

For Each Accordion Item:

1. Add Item Title that should appear on the Accordion Item.
2. Add Item Body to the Accordion Item. Format the text as needed. The Item Body text is displayed to the learner when the Accordion Item interacts.
3. Select Media Type. You can select Image, Video, Videostream or Gif to be displayed in the Accordion Item.
4. Select Position of Item Media. This is where your Media will be positioned in the Accordion Item. You can choose to display the Media to the left, right, top or bottom, relative to the text.

Add Media Type:

If you want to add an Image to the Accordion Item, you need to do the following:

1. Select or upload an Image to display.
2. Enable Image Advanced Settings if you want to set different images per device.
3. Add Alt Text if you want to add alternate text for accessibility.
4. Toggle View Image in Lightbox, as needed.
5. Toggle Enable Magnifier, as needed.

If you want to add a Video to the Accordion Item, you need to do the following:

1. Select or upload a Video.
2. Add a Poster Image.
3. Enable Auto Play for the video to automatically play when the item is selected.
4. Add Button Label, as needed.
5. Add Transcript Text, as needed.
6. Add subtitles Label, as needed.
7. Add Subtitles, as needed.

If you want to add a VideoStream to the Accordion Item, you need to do the following:

1. Set the Video player service used for your video.
2. Enter Video Embed Code.
3. Set and enable all other options for the Item Video Stream, as needed.

If you want to add a Gif to the Accordion Item, you need to do the following:

1. Select or upload an Item Gif to be displayed.
2. Add Alternative text for accessibility.

Add, duplicate, or delete items as needed.

Component Examples

The Accordion component gives you a lot of flexibility. Below are examples that illustrate different Accordion Item component setup:

Example 1 – displays only text.

Example 2 – displays text and image to the right.

Example 3 – displays text and video to the left.

Example 4 – displays text and a top placed image.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.