HTML: Tabs
Using tabs in your course is a good idea for several reasons:
1. Aesthetics: Tabs improve your course design by making your content pages more organized and visually appealing.
2. Chunked content: Avoid using multiple pages for chunked content.
3. Avoid text-heavy pages: Keep similar content together without creating a longer page that looks overwhelming to students.
Basic Steps:
1. Copy the HTML code (see next tab).
2. Open a new content page, select the HTML Editor, and paste the code.
3. Edit the names and contents of your tabs.
4. Save the page to see what the tabs look like!
TIP: Edit the name and content of your tabs in the HTML Editor. It can be very easy to accidentally delete a needed line of code.
CAUTION: Trying to mix other HTML code tricks with tabs often causes problems, as other code snippets (such as the one for a background color) uses <div>, which Canvas misinterprets as a part of the tab code.
VIDEO: Adding Tabs
(end at 7:56)
0:00 Creating your tabs
3:36 Adding more than text
4:40 Removing excess tabs
5:38 Undoing mistakes
6:51 Adding tabs
<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>