How to Create an Accordion 


You can reduce the amount of text presented to learners by using the responsive accordion content type. 
The Accordion content type can be used for presenting text when there is a limited amount of vertical space.  Readers decide which headlines to take a closer look at by expanding the title.  Excellent for providing an overview of optional in-depth explanations.  The content inside Accordion is shown in collapsible panels with a title. Each panel expands by clicking on the title.  The accordion is fully responsive and works great on smaller screens as well as on desktops.

Features 


  • Add title and text for each expandable item.
  • You can define whether you want to use Heading 2, 3 or 4 for titles 
  • Use rich formatting for expanded text. 


This is an example of an Accordion below:
Image Placeholder


Accessing H5P
You can access H5P in Canvas through the Rich Content Editor (RCE), which is accessible via the edit view of Page, Assignment, Discussion Board, Announcement and Quiz questions. 

For this example, we will be adding H5P onto a Canvas page. The first thing you will need to do is either open the page you want to embed the H5P content into or create a new page. Then click the ‘Edit’ button which will open the RCE. (You will automatically go into edit mode if you create a new page.) 

Next, you will need to locate H5P in the RCE toolbar by clicking on the H5P icon.

Image Placeholder

Clicking on that menu item will open a pop-up showing your H5P library. From here, you will have the option to either insert previously created content or create something new. 



Select the Add content option.

A search bar will pop up. 

Type Accordion into the search bar and choose it from the options that pop up. 

Image Placeholder



Accordion Editor

The Accordion editor should now appear and it looks like this:



Title


Type the following text in the Title field: Types of berries



Panels


We can now add the panels the Accordion consists of.

Each panel has a title and text.

Fill in your title and text here. 

See example 


To add a new panel using the "Add panel" button.

Follow the same steps as in the example above. 
 

Finishing up

Save and Insert to view your finished Accordion.