[ARCHIVED] Syllabus tabs

[haileyrichins]

How can I create tabs within the syllabus tab in Canvas as shown below? And once the tabs are created how do I edit content in each of the tabs? Is this possible? 

[nwilson7 · Accepted solution]

Hello  @haileyrichins ‌, I have found this piece of HTML pretty helpful for that.  If you do not know HTML that is fine, but when in the rich content editor, switch to HTML mode and paste this in.  You can switch back from that view once you have pasted it and it will show you in plain text how to edit it.  Hope this helps!

<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1">TEXT for First Tab</a></li>
<li><a href="#fragment-2">TEXT for Second Tab</a></li>
<li><a href="#fragment-3">TEXT for Third Tab</a></li>
<li><a href="#fragment-4">TEXT for Fourth Tab</a></li>
<li><a href="#fragment-5">TEXT for Fifth Tab</a></li>
</ul>
<div id="fragment-1">
<h3><strong>Text for first tab</strong></h3>
<p>Please select this text and replace with your own content. </p>
</div>
<div id="fragment-2">
<h3><strong>Text for second tab</strong></h3>
<p>Please select this text and replace with your own content. </p>
</div>
<div id="fragment-3">
<h3><strong>Text for third tab</strong></h3>
<p>Please select this text and replace with your own content. </p>
</div>
<div id="fragment-4">
<h3><strong>Text for fourth tab</strong></h3>
<p>Please select this text and replace with your own content. </p>
</div>
<div id="fragment-5">
<h3><strong>Text for fifth tab</strong></h3>
<p>Please select this text and replace with your own content. </p>
</div>
<div> </div>
</div>
<p>Please select the next tab above to move to the next content tab or the next button below to move to the next topic. </p>

-Nick

[haileyrichins]

Thanks  @nwilson7 ‌. I input the code but it's only showing as hyperlinks at the top of the page not tabs. Is there a way I can turn the links to tabs at the top of the syllabus? I know the basics of HTML and can manipulate code but I don't know what code I'd need to turn the links into tabs. 

[nwilson7]

 @haileyrichins ‌, sorry for the delay.  In the RCE (Rich Content Editor) it will appear like that to help show you how to edit it in plain text and not HTML.  When you save the page and look at it not in edit mode, you will see the tabbed version.

Also, they won't actually be hyperlinks in the end.  They look like that and the HTML has the "href" but it is just referencing to another portion of the code to get the tabbed effect.

Hope that helps, looks like  @Chris_Hofer ‌ provided some helpful resources too!

-Nick

[Chris_Hofer]

Hello  @haileyrichins ...

I would like to point you to two resources that may be of help:

• Tabs (This topic is located in the Instructional Designers group...and you may need to click on the "Follow" button located at the top right corner of that page to follow the group.  There's also an "Actions" button in that same area of the group...and you'll need to select "Join group" if you want to participate in any of the discussions within that group.)
• https://community.canvaslms.com/groups/designers/blog/2017/06/16/making-a-content-page-with-tabs (specifically, refer to the first reply in this blog from  @James ‌)

I hope these resources will be of help to you, Hailey.