Canvas 2.0: Content Tabs

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, on 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.

Code Snippet to Try

This code is a bit longer than what we’ve showcased before. That’s mostly just because I created 3 tabs for you to play with.

You’ll see the code is divided into two primary sections. The first part (within the <a> tags) creates the tab headers and makes them clickable. The second part (in the <div id> tags) indicates what content should be added to each tab.

Please note that the Rich Content Editor will not display tabs correctly. You have to save your work before you will see the tabs.

Try out this code snippet by copying and pasting it into the Canvas HTML editor.

<div class="enhanceable_content tabs">
    <ul>
        <li><a href="#tab-1">First Tab </a></li>
        <li><a href="#tab-2">Second Tab </a></li>
        <li><a href="#tab-3">Third Tab </a></li>
    </ul>
    <div id="tab-1">
        <p>Tab 1 content.</p>
    </div>
    <div id="tab-2">
        <p>Tab 2 content.</p>
    </div>
    <div id="tab-3">
        <p>Tab 3 content.</p>
    </div>
</div>

Modifications

Within each content tab, you can add a wide range of content types such as paragraphs, lists, images, videos, etc. You can also enhance both the tabs and the content with other code you know, such as borders and background colors.

Tip: If you are using additional code within your tabs, we recommend building it all out in another Canvas page and then copying the code from that page into the appropriate space of your tab code.

Bonus: Fun Styled Tabs to Try

For an example of some styled tabs, copy and paste this more complex bit of code into the HTML editor. Don’t forget you have to click Save in order for the tabs to display correctly.

<div class="enhanceable_content tabs">
    <ul>
        <li><span style="color: #34495e; font-family: 'Architects Daughter', 'Lato Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18pt;"><a style="background-color: #8ecae6; text-decoration: none; color: #34495e;" href="#tab-1"> Overview </a></span></li>
        <li><span style="font-family: 'Architects Daughter', 'Lato Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18pt;"><a style="background-color: #219ebc; text-decoration: none; color: white;" href="#tab-2"> Readings </a></span></li>
        <li><span style="font-family: 'Architects Daughter', 'Lato Extended', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18pt;"><a style="background-color: #023047; text-decoration: none; color: white;" href="#tab-3"> Assignment </a></span></li>
    </ul>
    <div id="tab-1">
        <p>Just look at this awesome content I put in Tab 1. Click on the other tabs to see more.</p>
        <p>After finishing this unit, you will be able to:</p>
        <ul>
            <li>Do the thing.</li>
            <li>Do another thing.</li>
            <li>Do one more thing.</li>
        </ul>
    </div>
    <div id="tab-2">
        <p>Check out this stuff in Tab 2. Add some big blocks of paragraphs like this.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <div style="width: 80%; margin: auto; background-color: #fefae0; padding: 15px; border: 3px dotted #219ebc; border-radius: 1px; text-align: center;">This is important to remember, so it's going in a box to emphasize it.</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="tab-3">
        <div id="fragment-3" style="text-align: center;">
            <p style="text-align: left;">You can add other cool things in tabs, too.</p>
            <p style="text-align: center;"><iframe class="giphy-embed" src="https://giphy.com/embed/g7GKcSzwQfugw" width="480" height="408" loading="lazy" allowfullscreen="allowfullscreen"></iframe></p>
        </div>
    </div>
</div>