Canvas 2.0: Accordion Lists

Posted by Mendy Smith on

This topic is slightly more technical, but it will allow you to enhance your Canvas content in ways that help you structure information more meaningfully.  This will require a little familiarity with HTML coding.

  • If you don’t want to learn HTML coding, that’s OK! You can still use Canvas proficiently without learning HTML! You can ignore this page.
  • If you’d like to learn HTML basics, we recommend that you start with this video. Start experimenting with the Canvas HTML editor a little at a time when you feel ready.
  • If you are already an HTML expert, please note that Canvas does not support the full realm of all possible HTML tags. You can check out the current list of supported tags and attributes here.

How to HTML in Canvas

All Canvas tools that use the Rich Content Editor (RCE) allow you to edit the HTML code.  To turn on the HTML editor, click the </> button located under the RCE window, at the right side.  When you are done with the HTML editor, click that button again (still located in the same place) to return to the RCE.  Don’t forget to save your work as normal.

Accordion Lists

Accordion lists are a space-saving feature in HTML that can reduce clutter on a page. The user can toggle the accordion list between displaying and hiding content.  They are often used for pages like FAQs where the title describes the hidden content and the user can decide which content pieces they wish to see.

While this can be a very helpful organizational tool, please use discretion when adding it to your course content since students may miss information while it’s collapsed.  You can explicitly direct students to open the list, or you can reserve accordion lists to use only for supplemental information that isn’t critical.

Code Snippet

Copy and paste this code snippet into the Canvas HTML editor to try it out.

<details>
    <summary style=”cursor: pointer;”>Add Your Heading Here</summary>
        <p>Sample paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        <ul>
            <li>Lorem ipsum </li>
            <li>Dolor sit amet</li>
            <li>Consectetur adipiscing</li>
        </ul>
</details>

Modifications to the Code

If you’d like to spice up your accordion list a little, you can add a subtle border to offset the accordion content from the paragraphs that follow.  Try adding the following code after the <summary> tag (with your heading text), but before the <p> tag (with your content):

   <div style=”border: thin solid #F1F3F4; padding: 5px 15px;”>

Don’t forget to add the closing </div> tag just before the closing </details> tag.

Want to customize further? Read more about HTML text borders.