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

Follow these steps to add the Accordion component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Accordion component.
3. Click the Accordion component and select Add Left, Add Full or Add Right .

Click the Edit Component icon on the newly added Accordion component to begin set up.

General & Behaviour sections

In the General section:

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

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

1. Add Accordion 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 that 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 Behaviour section:

In the Behaviour 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.

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 Autoplay for the video to automatically play when the item is selected.
4. Add Label, as needed.
5. Add Subtitle, as needed.
6. Add Transcript, including Transcript Button Text and Transcript Text, 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.