How to Create Tabbed Pages

Tabbed pages have become a popular Canvas style choice. These tabbed pages allow content to be divided into more comfortable "chunks" without a page becoming too long (or having to create a second page). 

<ul style="background-color: #fffff0;"> [This is added to the <ul> tag that holds the tab titles (highlighted in blue 
below). Make sure whatever background color you choose has sufficient contrast with the blue link text in Canvas.]

Tabs section
<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1"><span>Tab 1</span></a></li>
<li><a href="#fragment-2"><span>Tab 2</span></a></li>
</ul>

Content section
<div id="fragment-1">Text goes here</div>
<div id="fragment-2">Text goes here</div>
</div>

Tabs section
<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1"><span>Tab 1</span></a></li>
<li><a href="#fragment-2"><span>Tab 2</span></a></li>
<li><a href="#fragment-3"><span>Tab 3</span></a></li>
</ul>

Content section
<div id="fragment-1">Text goes here</div>
<div id="fragment-2">Text goes here</div>
<div id="fragment-3">Text goes here</div>
</div>    

2 Tabs (plain/uncolored)

Tabs section

3 tabs with colored tabs

You can change the colors by adding a new hex code into the background-color, background, or solid color section (anytime you see something like #bf4ae3; that is a "hex code" for color.) You can easily find hex codes here Links to an external site..

Don't forget that color is an accessibility concern, so be sure to choose colors with enough contrast that they can be easily viewed (the built-in accessibility checker will also help.) 

Using tabs requires you to be careful when editing the content within the tabbed pages. When editing the text, be sure to check the HTML when you are finished. 

Practice

• Open a blank content page and switch to the HTML editor. 
• Copy the code included above into the HTML editor. 
• You can add/change the background color. 
• You can add additional tabs (change the "fragment number" for each new tab)  
• Switch back to "rich text editor" and SAVE the page to see what your changes have done.
  • Tabs will not render in "edit." You must save the page to view them.  
• Add the sample code to the note page app on your computer or a reference page on Canvas. You can copy/paste the sample code anytime you need it. 

Demo Video