CTL GuidesCanvas GuidesInstructor GuidesCanvas Beyond BasicsHow do I create expandable sections in my Canvas Page?

How do I create expandable sections in my Canvas Page?

Expandable sections are referred to as Togglers in Canvas. In this guide, you will learn how to input the HTML code for Togglers and how to edit that code within Pages in Canvas. This guide is for people comfortable with HTML coding.

1. Create a new page in Canvas
  1. Navigate to Pages from the Course Navigation menu
  2. Click on the + Page button.

2. In edit mode, switch to HTML Editor

3. Copy and paste this code into the HTML Editor text box 

<h4><span class="element_toggler btn btn-primary" role="button" aria-controls="instructions" 
 aria-label="Toggler toggle list visibility" aria-expanded="false"> TITLE BUTTON HERE</span></h4>

 <ul id="instructions" style="list-style: none; display: none;">
 <li>

 <h4><strong>SUB-TITLE</strong></h4>

 <p>INPUT CONTENT HERE</p>

 <p>INPUT CONTENT HERE</p>

 </li>
 </ul>

4. Input your content while in the HTML Editor

Replace the highlighted text with the title you want for the Toggler Button [1] and the content you want within this toggled section [2].

Each paragraph within the content section must start with <p> and end with </p> in the HTML Editor.

5. Click Save

6. Test your Toggler Button!

The image below shows the Toggler Button contracted, i.e. the content is hidden.

The image below shows the Toggler Button content expanded.

For additional information, please visit this Canvas Commons Discussion post where this HTML code was generated.