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.
Paste the code you received from either the Canvas Style Guide or from the text file above.
In the HTML code, the top section creates your Tab Labels. You can modify these to reflect the content you are creating.
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.
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.
Now you will need to tell the tab where to go by adding additional Tab Content. Copy and Paste the last item.
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.
Final Code
Your final code may look something like the following (with Lorem Ipsum added as place holder text):
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 Guide, Canvas Features page.
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.
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!
And this is the final product! After all of your hard work, you will have your content neatly organized into tabs!
0 Comments
Add your comment