How to Create an Accordion 


The Accordion content type allows users to add accessible accordions to their sites. The accordion is fully responsive and works great on smaller screens as well as on desktops.

The Accordion content type can be used for presenting text when there is a limited amount of vertical space. The content inside Accordion is shown in collapsible panels with a title. Each panel expands by clicking on the title. 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 more external tools 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 New content option and choose Accordion from the list of Content types: 



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

Here, we'll add the panels/titles that the Accordion consists of. We'll add four panels.

Panel 1:
The 1st panel is added by default.  It consists of a title and text. Fill in your title and text here. 


Add new panel using the "Add panel" button. Fill in the next three panels with your titles and text. 


Finishing up

Save and Insert to view your finished Accordion.