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.
Steps to Add Tabs
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 #1: Have your content typed elsewhere (e.g., a sandbox course, or above where you create your tabs), and cut & paste the content into your tab. Trying to edit content once placed in tabs can cause unexpected errors in the code.
Tip #2: If you need to, 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.
<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>
To add additional tabs, copy the pattern seen in the code snippet above. For example, above the </ul>, add
<li>
<a href="#fragment-4">PUT TITLE FOR TAB HERE</a>
</li>
Additionally, above the final </div>, add
<div id="fragment-4">PUT THE CONTENT FOR THE FOURTH TAB HERE</div>
Colored Tabs
To add colors to your tabs, replace <li> in the code snippet with
<li style="background-color: #ebedee;">
Anatomy of Code Snippet