cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
rcrichards
Community Member

I've seen syllabi with tabs on Canvas. I want to organize my syllabus with tabs. How do I do that? Here's a screenshot of a syllabus with tabs:

284746_pastedImage_1.jpg

1 Solution

Accepted Solutions
kmeeusen
Community Coach
Community Coach

Hi  @rcrichards 

This can be accomplished using HTML code, and the HTML Editor in the Syllabus Description area. Here is a code snippet that will work for this purpose.

<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>

Disclaimer: Canvas keeps threatening to deprecate this code, but it's been two or more years, an nothing yet.

This can also be accomplished with some third-party authoring tools that work with Canvas.

We have a full Canvas classroom of various HTML snippets that are easy to learn and easy to use that Instructure let us create called CanvasHacks Demo Course. If you would like to be added to the actual Canvas classroom, shoot me your email via DM, and I will hook you up. You can be added as either a teacher of a student.

Kelley

View solution in original post

45 Replies
kmeeusen
Community Coach
Community Coach

Hi  @rcrichards 

This can be accomplished using HTML code, and the HTML Editor in the Syllabus Description area. Here is a code snippet that will work for this purpose.

<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>

Disclaimer: Canvas keeps threatening to deprecate this code, but it's been two or more years, an nothing yet.

This can also be accomplished with some third-party authoring tools that work with Canvas.

We have a full Canvas classroom of various HTML snippets that are easy to learn and easy to use that Instructure let us create called CanvasHacks Demo Course. If you would like to be added to the actual Canvas classroom, shoot me your email via DM, and I will hook you up. You can be added as either a teacher of a student.

Kelley

James
Community Champion

Thanks for including the disclaimer,  @kmeeusen . I can go get my root canal as a happy camper now.

kona
Community Coach
Community Coach

 @rcrichards , welcome to the Community! While tabs are awesome, I've been hearing that Canvas is at some point going to strip out some things that will render the coding for tabs unusable (cause them not to work without some custom global javascript). In addition, tabbed pages for the most part don't come through very nicely on mobile devices. 

I'll admit that I joined the bandwagon and had tabbed everything on my pages for a while, but I've started to phase them out of my courses and what I do in Canvas. Just wanted to give you a heads up before you spent a lot of time adding them in.

Kona

kmeeusen
Community Coach
Community Coach

Oh man,  @James  you get to have a root canal? How awesome is that? Some people just have a corner on the luck market.

kmeeusen
Community Coach
Community Coach

Yeppers, that's why I threw in the disclaimer,  @kona 

No fake news for me!

Kelley

Thanks!

kona
Community Coach
Community Coach

Sorry, missed that the first time around. 🙂

James
Community Champion

 @kmeeusen ,

I am lucky. It was the tooth that shattered the day before InstructureCon while in Colorado. Almost 4 hours emergency dental work at not-my-regular-dentist, very little covered by insurance, had to take out the tooth next to it because the shattered one was so weak they needed to splint the two together so it had something to hold on to. All this led to a temporary crown on two teeth that will get replaced once my dentist is done flipping his %&*# over what another dentist did to my teeth. He's overly protective that way.

Since we're educators and value the importance of learning from experiences, here's my take-away:

If you're going to go horseback riding in the mountains of Breckenridge and bite into a frozen candy bar and shatter your front tooth that your dentist is currently prepping for a root canal, make sure you are not 1000 miles from home.

kona
Community Coach
Community Coach

YES, THIS.