Collapsible 'accordions' within a page

This question and answer have been modified from a page developed by Marion Sadoux, Head of Modern Language Programmes at the Language Centre, with acknowledgement and thanks.

 

Q. Is it possible to create collapsible 'accordions' (sections) within a Canvas page?

A. Yes, one can insert appropriate code within the HTML editor as described below.

1.  Why use collapsible sections?

Collapsible sections in a Canvas page are very useful to :

  • add more content without needing to navigate to a new page
  • add more content without making the page look overwhelming
  • maintain sight of the structure of the information

They can also be used to hide and reveal content in a way that has a pedagogic value because it maintains proximity to a stimulus, while allowing the student control over revealing the additional information.  Think of a few ways in which this could be applied in practice ...

Examples of possible use (click to reveal)

You could use collapsible sections to:

  • Display the answers to questions or the keys to exercises
  • Display explanations  in text or video format
  • Incorporate subsections of your learning pathway
  • Provide generic feedback on a given activity
  • Provide annotations on a prescribed text
  • Add a transcription below an audio or video file

 

2.  How to create a collapsible section?

To create a collapsible section, you will need to have a title – and some text or media to put into the body of the section.  Once the collapsible section has been created, it can be edited like the rest of the page.

First step: copy the html code below

<details>
<summary style="background-color: whitesmoke; font-weight: bold; cursor: pointer;">CONTENT TITLE <small>(click to reveal)</small></summary>
<p>FIRST ITEM</p>
<p>SECOND ITEM</p>
<p>THIRD ITEM</p>
</details>

Second step:

Click on the html editor icon </> below the editing window of the page in which you want to insert the section. Click on the position where you want to insert your section and paste the text copied from above.

Third step:

  • Replace 'CONTENT TITLE' with the title of your section.
  • Replace 'FIRST ITEM', 'SECOND ITEM', 'THIRD ITEM' etc  with your content (which may be text or media, such as the embed code of an existing video).
  • Click on 'Rich content editor' in the top right corner of the editing window.

Your collapsible section has appeared – it is open and you can continue to edit it or click just below it to return to the page.

Note that when you save the page, the collapsible section is closed; when you return to edit it, it is open again to reveal its contents.

 

Another approach to creating collapsible accordions on a page would be to use the third party tool H5P, which was used in this question and answer example from Medical Sciences:
You would need to first request an H5P account from the Centre for Teaching and Learning.