Create an HTML Collapsible Section in Canvas

Canvas pages can become lengthy and difficult to scan. To make content easier to navigate, you can add collapsible sections using HTML. This guide walks you through adding collapsible headings using the HTML editor in the Rich Content Editor (RCE).

HTML Considerations

Not all HTML is accepted by Canvas.
All customizations must meet WCAG Level A and Level AA compliance.
HTML code must be written perfectly for it to work.
Enter replacement text exactly where placeholders appear in the copied code.
Avoid extra spacing or duplicating punctuation that is not represented in the code provided.
Backspace and delete can mess up your HTML in the RCE.
You can copy HTML anywhere in your course for a consistent appearance.
Always confirm the results of your work before publishing.

Step 1: Copy the Code

<details class="collapsible-section">
  <summary class="collapsible-heading">Click to Expand</summary>
  <div class="collapsible-content">
    <p>Paragraph Content</p>
  </div>
</details>

Step 2: Open the HTML Editor and Paste the Code

Open the Canvas Rich Content Editor. Click the HTML button to enter HTML view. Paste the code exactly as shown above.

Step 3: Customize the Placeholder Text

It’s recommended to switch back to the Rich Content Editor view to modify the placeholder text. To do this, select the HTML button once more, then:

Click to Expand: Change this to your section heading.
Paragraph content: Replace with your text, images, or links.

Step 4: Save and Test the Collapsible Section

Save the page to see your collapsible heading in action. Click the section to expand and collapse it. Confirm that all content appears as expected.

Collapsible Section FAQ

Can I add more than one collapsible section?

Yes. You can paste the code multiple times on a page, updating the heading and content for each section.

Can I add lists, links, or videos inside?

Yes. You can include most supported HTML elements within the <div class="collapsible-content"> block.

Why isn’t my section collapsing correctly?

Make sure there are no typos in the <details>, <summary>, or class names. Canvas is strict with malformed HTML.

Can I copy and reuse collapsible sections?

Yes. You can copy them in the HTML editor or WYSIWYG view. Keep a saved version for reuse.

Can I use different heading levels?

Yes. You can wrap your summary text in <h3> or <h4> tags if needed, but it’s best to keep the collapsible-heading class on the <summary> itself for consistent styling.