How do I create Tabs in my Canvas Page?

Tabs are useful for organizing the content of a page within Canvas to reduce scrolling. This guide will show you how to input the Tabs HTML code into pages, add more tabs, and editing your content within each tab.

1. Create a new page in Canvas

Need help creating a new page? Please view this Canvas Guide: How do I Create a new page in a course?

2. In the edit stage of your new page, click on HTML Editor

2. Copy and paste this code into the HTML Editor text box. 

<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-2">PUT TITLE FOR TAB HERE</a></li>
<li><a href="#fragment-3">PUT TITLE FOR TAB HERE</a></li>
</ul>
<div id="fragment-1">PUT THE CONTENT FOR THE FIRST TAB HERE</div>
<div id="fragment-2">PUT THE CONTENT FOR THE SECOND TAB HERE.</div>
<div id="fragment-3">PUT THE CONTENT FOR THE THIRD TAB HERE</div>
</div>

3. Edit the title of each tab

In the HTML Editor, highlight "PUT TITLE FOR TAB HERE" and type in your chosen titles for each tab.

4. Edit the content for each tab

If you are comfortable with coding, you can input your content directly into the HTML Editor by replacing "PUT THE CONTENT FOR THE FIRST TAB HERE" with the code for your content.

If you are not comfortable with coding, you can input your desired content by following this guide:

  1. Create a temporary new page in Canvas (How do I Create a new page in a course?)
  2. Create your content in the Rich Content Editor
  3. Switch to the HTML Editor, select the whole code (CRTL+A) and copy the code of your content (CRTL+C)
  4. Go back to the page with the Tab code, and in the HTML Editor, and paste (CRTL+V) the code of your content into the Tab code; this will replace "PUT THE CONTENT FOR THE FIRST TAB HERE" with your copied code.

5. How do I add more tabs?

For your information, "fragment-1" is associated with the first tab's title and its content. "Fragment-2" is associated with the second tab's title content, and so on.

To add more tabs, first, copy the code below and paste it directly below that same code in the HTML Editor [1]. Second, change the number after fragment so the numbers appear in consecutive order [2].

<li><a href="#fragment-3">PUT TITLE FOR TAB HERE</a></li>

Next, copy the code below and paste it directly below that same code in the HTML Editor [1]. Then, change the number after fragment so the numbers appear in consecutive order [2].

<div id="fragment-3">PUT THE CONTENT FOR THE THIRD TAB HERE</div>

6. Click Save

Article Summary

Congratulations! You have successfully created tabs within your page in Canvas.