Create an accordion in Canvas

When creating content in Canvas, you may need a way to declutter its visual appearance. One option is to use "accordions", which allow viewers to fold and unfold segments of text by clicking corresponding title areas.

An example use case for an accordion is an image that requires a complex description. Traditional alt text does not allow structures like lists and tables. If you need these kinds of structures to describe the image, but don't want the description to clutter the page's appearance when not in use, you can place the description in an accordion below the image.

To add an accordion to a Canvas page:

  1. On your Canvas page, click Edit.
  2. Beneath the text field, click Switch to raw HTML editor (Icon to toggle between HTML and rich text editors).
  3. In the location where you want the accordion to appear, insert the following text. Replace [summarizing title] and [hide/view text], respectively, with your own summarizing title and the text that will appear when the accordion is open.
    <details>
    <summary>[summarizing title]</summary>
    <p>[hide/view text]</p>
    </details>
  4. To return to the rich text editor, click Switch to rich text editor (Icon to toggle between HTML and rich text editors). You can now edit both parts of the accordion, if necessary, and add structures such as lists or tables.
  5. To test the accordion, click Save.

This is document dion in the Knowledge Base.
Last modified on 2021-02-05 12:52:20.

Contact us

For help or to comment, email the UITS Support Center.