Learn more about using tabs in this GMCTL EdTech Blog post: Create Tabs in Canvas Pages with this HTML Trick

A word of warning

This type of HTML tab does not work in the Canvas Student app in the same way (the presentation in the app is a flat, linear arrangement of the content inside of the tabs). If you know that your learners are likely to access the materials from a mobile device, you may wish to reconsider the use of tabs (or, if possible, advise your students to use a desktop browser instead). Whenever you build pages in Canvas with lots of customization, it’s always a good idea to test out how things look in the mobile experience before proceeding.

Tab 1 Content goes here.

Tab 2 Content goes here.

Tab 3 Content goes here.

Code snippet:

<div class="enhanceable_content tabs">
    <ul>
        <li><a href="#tab-1"><span>One</span></a></li>
        <li><a href="#tab-2"><span>Two</span></a></li>
        <li><a href="#tab-3"><span>Three</span></a></li>
    </ul>
    <div id="tab-1">
        <p>Tab 1 Content goes here.</p>
    </div>
    <div id="tab-2">
        <p>Tab 2 Content goes here.</p>
    </div>
    <div id="tab-3">
        <p>Tab 3 Content goes here.</p>
    </div>
</div>

Redacted Text:

This approach is meant as an approximation of the "spoiler text" feature available on sites like Reddit. While not quite the same, students can click the 2nd tab to reveal the hidden text. Note that the "redacted text" here is set to have background-color: #252525, which matches the default text colour on USask's instance of Canvas. Students can also see the text if they were to highlight it with their mouse!

Hide content
Show content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis molestie dui. Nam dignissim dignissim nulla. Mauris eros massa, rhoncus a ex non, scelerisque laoreet tellus. Proin eu metus sagittis, venenatis orci in, tempus est. Aliquam massa lectus, congue nec tortor ut, maximus posuere mi. Praesent rutrum sit amet lacus a rhoncus. Etiam ipsum metus, facilisis in leo at, pharetra efficitur velit. Pellentesque a justo at enim viverra malesuada. Donec quam lorem, ultrices ut ipsum vitae, bibendum semper nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis molestie dui. Nam dignissim dignissim nulla. Mauris eros massa, rhoncus a ex non, scelerisque laoreet tellus. Proin eu metus sagittis, venenatis orci in, tempus est. Aliquam massa lectus, congue nec tortor ut, maximus posuere mi. Praesent rutrum sit amet lacus a rhoncus. Etiam ipsum metus, facilisis in leo at, pharetra efficitur velit. Pellentesque a justo at enim viverra malesuada. Donec quam lorem, ultrices ut ipsum vitae, bibendum semper nibh.

Code snippet:

<div class="enhanceable_content tabs">
    <ul>
        <li><a href="#tab-1"><span>Hide content</span></a></li>
        <li><a href="#tab-2"><span>Show content</span></a></li>
    </ul>
    <div id="tab-1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis molestie dui. <span style="background-color: #252525;">Nam dignissim dignissim nulla. Mauris eros massa, rhoncus a ex non, scelerisque laoreet tellus. Proin eu metus sagittis, venenatis orci in, tempus est. Aliquam massa lectus, congue nec tortor ut, maximus posuere mi. Praesent rutrum sit amet lacus a rhoncus.</span> Etiam ipsum metus, facilisis in leo at, pharetra efficitur velit. Pellentesque a justo at enim viverra malesuada. Donec quam lorem, ultrices ut ipsum vitae, bibendum semper nibh.</p>
    </div>
    <div id="tab-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis molestie dui. Nam dignissim dignissim nulla. Mauris eros massa, rhoncus a ex non, scelerisque laoreet tellus. Proin eu metus sagittis, venenatis orci in, tempus est. Aliquam massa lectus, congue nec tortor ut, maximus posuere mi. Praesent rutrum sit amet lacus a rhoncus. Etiam ipsum metus, facilisis in leo at, pharetra efficitur velit. Pellentesque a justo at enim viverra malesuada. Donec quam lorem, ultrices ut ipsum vitae, bibendum semper nibh.</p>
    </div>
</div>