Alamo Colleges District

Creating Tabs in Canvas

Updated on

Canvas logo with red circle and red Canvas lettering

This feature is created using the Canvas Style Guide - Tab Navigation. The use of this design attribute is dependent upon Canvas' continued support of jQueryUI. In order to use tabs inside your Canvas course, you need to have some basic HTML knowledge to customize them.

Accessing the Code

You can access the code via the Canvas Style Guide - Tab Navigation. Alternatively, you can download the same HTML code from a text file.

You will use this code in the HTML Editor in your Canvas Page to create your Tabs. The tab labels and content are both customizable.

Using the Code

After you have accessed the code above, create a new page in Canvas(for information on how to do this, visit the Canvas Guides). Next, enter the HTML Editor.

Click on HTML Editor in the content editor

Paste the code you received from either the Canvas Style Guide or from the text file above.

Paste code from Canvas or text file

In the HTML code, the top section creates your Tab Labels. You can modify these to reflect the content you are creating.

Within the div tags find the Tab 1, Tab 2, and Tab 3 content wording

The bottom section is where your Tab Content lives. Make sure your individual content stays between the <div></div> tags.

Note: You can modify this content with the Canvas Rich Content Editor. However, we suggest modifying your content from within the HTML editor to ensure you stay within your <div> tags.

Adding Tabs

To add additional tabs, begin by copying and pasting the last Tab Label in the list.

copy <li><ahref="#tabs-3"> ... </li> line

Next, you will want to modify the link (<a href="#tabs-1">) to reflect the next tab in numerical order as well as the Tab Label (Week 1). Your labels do not have to be organized numerically, but this example utilizes a weekly organizational structure.

paste the line and modify it for more tabs

Now you will need to tell the tab where to go by adding additional Tab Content. Copy and Paste the last item.

copy and paste <div id="tabs-3"> ... </div> line

Like above, you will need to modify your tab ID and content information. Change the <div id="tabs-1"> to be the next item in numerical order to reflect the Tab Label you added above. Add your Content Information under each content tab ID.

modify your tab ID and content information

Final Code

Your final code may look something like the following (with Lorem Ipsum added as place holder text):

sample code with Lorem Ipsum

Within your <div></div> tags of your Tab Content, you can add additional HTML. So, if you wish to add images, decorative text, etc, the Tabs will support this.

Sample Tabs

The samples below are from the Canvas Student Quick GuideCanvas Features page.

HTML Editor

This is the code that is used to create the tabs. You can see that the tab links match the tab labels in order for the content to correctly display and the tabs to work.

Code with code showing fragment 1 and fragment 2 code identified
Rich Content Editor

In the Canvas Rich Content Editor, you do not see the tabs displayed. Instead, your tab labels are displayed as a bulleted list, and your content is organized in one column of information. You can edit your tab content here, but be careful! You may end up with content going in the wrong tabs!

Screenshot showing how the tabs will not show within content editor
Published View

And this is the final product! After all of your hard work, you will have your content neatly organized into tabs!

screenshot showing tabs with content


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article Cross-listing & Re-cross-listing
Next Article Embedding Content
Still Need Help? Contact Us