Tabs


Tabs are a great way to segment material that is closely related. Use tabs when the material is too long to be included on a single page with headings (students would need to scroll down a long page), but too closely related to appear on adjoining pages. Tabbed pages will look like this:

Text goes here

Tabbed pages can include images, video, files, links, and can be formatted using headings. Tabbed pages work well for students, but they can be difficult to format for us. It's very easy to "break" a tabbed page while editing. 

The best approach is to add textual content in the HTML editor, then switch back to the RCE to format the page. 


Creating Tabs

To create a tabbed page divided into 3 segments:

  1. Edit your Content Page in Canvas (start with a new page);
  2. Select the HTML editor;
  3. Copy the HTML code below, and paste the code into the HTML editor;
  4. Name each tab by highlighting the tab name placeholder (Tab 1, Tab 2, or Tab 3), then typing in the desired tab name;
  5. Insert the text for the corresponding tab by highlighting the "Text goes here" placeholder in each segment;
  6. Toggle back to the RCE to format your text (headings, lists, links).
  7. Save your page.

Code (3 Tabs)

<div class="enhanceable_content tabs">

<ul>
<li><a href="#tab-1">TAB One</a></li>
<li><a href="#tab-2">TAB Two</a></li>
<li><a href="#tab-3">TAB Three</a></li>
</ul>

<div id="tab-1">
<!-- Start your content here -->
Content - One
<!-- End Content -->
</div>

<div id="tab-2">
<!-- Start your content here -->
Content - Two
<!-- End Content -->
</div>

<div id="tab-3">
<!-- Start your content here -->
Content - three
<!-- End Content -->
</div>

</div>