How to add accordion interactions

Introduction

In this article, we’re going to show you how to add accordion interactions to your pages.

Top tips before you begin

• Accordion interactions provide buttons on your page with labels that you can customise. When your learners click the buttons, they expand (like an accordion!) to show your text.
• Accordions are a smashing way of reducing the amount of text that’s initially visible on your pages. This makes them much more approachable for your learners.
• Accordion interactions make your courses more engaging for your learners, and help them to feel control over the pace at which content is being delivered.

Video

Watch the video to learn more:

Adding an accordion block to a page

To add an accordion block to a page:

1. Whilst editing a page, drag and drop an Accordion () block from the Add content section of the side menu and onto the page.

2. Select the Accordion block.
3. From the toolbar, click the edit () button.

Entering button labels

To enter your button labels:

4. Mouse over the area that says New item. An edit () button will appear.
5. Click the edit () button.
6. Enter your text and then click outside of the field to save your changes.

Entering the message to display when your button is clicked

To enter the message you’d like to display when your button is clicked:

7. Click in the text area beneath the button label.
8. Type your text or copy and paste it from another programme, such as Microsoft Word.

Formatting your text

You can format your text using the toolbar that appears above the text area.

To apply formatting to your text:

9. Select the text you’d like to format.
10. Select the format you’d like to apply from the toolbar.

The formatting options, from left to right, are:

	Bold
	Italic
	Underline
	Numbered list
	Bulleted list
	External link

Adding more buttons

To add more buttons:

11. Click the button.

Deleting buttons

To delete buttons:

12. Click the button next to the item you’d like to delete.

Rearranging buttons

To change the order that the buttons are displayed in:

13. Click the = next to the item you’d like to move and drag it to where you’d like to see it in the list.

Returning to the page

To return to the page:

14. Click the in the top-right of the screen.

How your learners interact with it

Once you’ve added an accordion interaction, your learners simply click the buttons on the page.

When clicked, they expand to show the text that you specified. If you have several buttons in the interaction, when the next button is clicked, the last one will collapse and the new one will open.