Create an expandable details widget in Canvas

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

An example use case for a details widget 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 a details widget below the image.

To add a details widget to a Canvas page:

1. On your Canvas page, click Edit.
2. Beneath the text field, click Switch to raw HTML editor ().
3. In the location where you want the details widget 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 details widget 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 (). You can now edit both parts of the details widget, if necessary, and add structures such as lists or tables.
5. To test the details widget, click Save.