cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
sulbert
New Member

Using Tabs in Your Canvas Course

Jump to solution

Using Tabs in Your Canvas Course

Video Link - http://screencast.com/t/y8kKgBuGOWT8

Utilizing tabs in your course may be a good idea for a variety or reasons.

  • Aesthetics – Tabs can improve your course design by making your course more visually appealing and look more organized.
  • You may be looking for a way to avoid using multiple pages for chunked content
  • Tabs can help keep similar content together without creating a longer page that looks overwhelming to students

The benefits of using headers within your tabs / fragments -

  • Design – Using headers within your tabs helps to visually organize and separate your content, and can improve the overall look of your page, especially if you have a large number of tabs.
  • Accessibility – visually impaired students who use screen readers can more easily select a desired section of the content, without having to wait for their reader to read through an entire page, which could be very long and inefficient.
  • It is important to repeat the title/header of the tab with the <h2> html code and also use the <h3> html code for sub headers within the tabs / fragments

I’ve included some example HTLM code. You can simply copy and paste this code into your HTLM editor. To make editing it easier, I’ve bolded the areas you would want to replace with your own content. You can also add additional tabs by duplicating the relevant coding, or delete any extra tabs, or content by removing the corresponding code.

To show you exactly how I added these tabs, you can follow along in the video

Thank you for watching.

______________________________

Tabs - HTML Code

<div class="enhanceable_content tabs">

<ul>

<li><a href="#fragment-1"><span>TAB 1 NAME</span></a></li>

<li><a href="#fragment-2"><span>TAB 2 NAME</span></a></li>

<li><a href="#fragment-3"><span>TAB 3 NAME</span></a></li>

<li><a href="#fragment-4"><span>TAB 4 NAME</span></a></li>

<li><a href="#fragment-5"><span>TAB 5 NAME</span></a></li>

</ul>

<div id="fragment-1">

<p><em>

Intro to what is presented in the tabs:

</em><span style="font-weight: 400;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span style="font-weight: 400;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">Section Name in "Heading 3" for Accessibility</span></h3>

<ul>

<li><span style="font-weight: 400;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></li>

<li>

Embed YouTubes within Tabs:


</li>

<ul>

<li><a class="" href="

https://youtu.be/kOjOr1ionic">https://youtu.be/kOjOr1ionic

</a> </li>

</ul>

<li>

<p>

Resource:

<a id="" class="" title=""

href="http://oei.onefortraining.org/videos/

" target="_blank">Captions for Videos</a></p>

</li>

</ul>

<h2><span style="color: #800000;"><span lang="EN"></span></span></h2>

<p> </p>

 </div>

<div id="fragment-2">

<h2><span style="color: #800000;">TAB 2 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/DrqIm31TE40" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<hr />

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<br />

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<h3><span style="color: #800000;">

Section Name in "Heading 3" for Accessibility

</span></h3>

<ul>

<li><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></li>

</ul>

<p><strong>

Links to Related Articles

</strong></p>

<ul>

<li><a title="

Formatting Text (On webpage/LMS)

" href="

http://oei.onefortraining.org/text/">Formatting Text (on webpage/LMS)

</a></li>

</ul>

<p class="">

Resource:

<a id="" class="" title="" href="

http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/

" target="_blank">

Formatting Text (Word and PowerPoint)

</a> </p>

</div>

<div id="fragment-3">

<h2><span style="color: #800000;">TAB 3 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/ZrbiqsqtStY" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<p><span>Resources:</span></p>

<ul>

<li><a id="" class="" title=""

href="http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/" target="_blank">Formatting Text (Word and PowerPoint)

</a></li>

<li><a id="" class="" title=""

href="http://oei.onefortraining.org/videos/

" target="_blank">

Captions for Videos

</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/formatting-images-webpage-lms/

" target="_blank">

Formatting Images </a>(Webpage/LMS)

</li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/color-contrast/

" target="_blank">Color Contrast</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/link-text-associated-with-a-universal-resource-locator-url/

" target="_blank">

URL Link Text

</a></li>

</ul>

<p class="p1"> </p>

</div>

<div id="fragment-4">

<h2><span style="color: #800000;">TAB 4 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/p9yszeopMZU" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></div>

<div></div>

<div></div>

<div id="fragment-5">

<h2><span style="color: #800000;">TAB 5 NAME</span></h2>

<p><iframe src="https://www.youtube.com/embed/jTogzQ9bsTY" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>

<p><span>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</span></p>

<p>

Resources:

</p>

<ul>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/text-in-microsoft-word-or-powerpoint-document/

" target="_blank">Formatting Text (Word and PowerPoint)</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/videos/

" target="_blank">

Captions for Videos

</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/formatting-images-webpage-lms/

" target="_blank">Formatting Images </a>(Webpage/LMS)</li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/color-contrast/

" target="_blank">Color Contrast</a></li>

<li><a id="" class="" title="" href="

http://oei.onefortraining.org/link-text-associated-with-a-universal-resource-locator-url/

" target="_blank">

URL Link Text

</a></li>

</ul>

<p class="p1"></p>

</div>

</div>

1 Solution
caitlin_stiles
Community Contributor

 @sulbert ​ thank you for this information. From what I can see, you can only have one page with additional tabs, is this correct? In otherwords, you can't have multiple pages with multiple tabs, is this right? From what I can see Canvas only provides the option to have on 'page'.

Appreciate your help.

View solution in original post

69 Replies

Excellent suggestions stephanie.johnson​!

I have found over the years, that a good orientation mitigates many of the problems students (and teachers) have with technology. This is why that is one of the Quality Matters standards for course design.

Other things like reminders or notices as you and stefaniesanders​ mentioned are also incredibly useful in making sure that the technology does not become a barrier to learning. Students represent the entire spectrum of technological expertise, and one of my mantras is to always design a course to the lowest common denominator, which is  a UDL principle - make navigation as simple and obvious as possible. Student need to be able to know what to do, where to find it and how to do it. All students!

This is a great discussion on one of my favorite HTML hacks in Canvas.

I would actually like this hack to become one of the standard features available through the UI: insert tabs here. How many tabs 3, 4, 5. What color should the tabs be? Etc.

KLM

kmatson
Community Member

Sarah,

Yes we need to pay close attention to not seeing TAB 2 etc. I like the idea of adding a note at the bottom of X number of tabs to read. Is it possible to link to TAB 2 so they don't get lost? OR add an anchor link to take them back to the top? I am not sure if anchor link is correct but something that takes them to the top of the page besides the keyboard shortcut ctrl home

I also think we can tell faculty to try to keep them short within each tab so they see the top which will have the next meaningful title rather than my TAB 1, TAB 2 etc.

Karen

mtuten
Community Contributor

I just posted a reply earlier on this page that contains some code that I think relates to this.

jbuchner
Community Contributor

This does not seem to work at all the the canvas app for iOS

tom_gibbons
Community Contributor

True--internal anchor tags don't work on any page in the Canvas app. It does roll back to an accessible format (and the Tab 1 should really have a title that's identical to all of the other tabs to make this work optimally), but the top-level links are broken. I use internal anchor tags like this on my syllabi (not tabs). They work great to section out the content and act as a TOC, but they dead-end in the app. Smiley Sad

tom_gibbons
Community Contributor

Shut up!

This is awesome. I stumbled across an example of this last week, and tried to wade through the source. I figured it was hitting some sort of scripting that we didn't have enabled in our instance of Canvas. BUT NO! It's simple HTML. Wheeee!

You get Charlie's Angel Food Cake!

Charlies Angels holding cake

Yep, fun and easy, Tom!

KLM

traciebosket
Community Champion

 @kmeeusen ​

Thanks Kelley, I appreciate it

caitlin_stiles
Community Contributor

Is it possible for Canvas to host a workshop about this information? I've been following the thread from the beginning and been able to build my own tab pages but a refresher which includes all these additional details would be highly valuable.

Thanks!

franke
Community Contributor

This is a great addition...thank you for this!  I do have a question that we're trying to solve when using tabs on a content page:  What would be the best way to enable the user to "print" all the information in the tabs on a content page?  For example, if we used tabs on the Syllabus page, a lot of students would want to be able to print all of the content in multiple tabs, but it would likely only print the active tab only. We thought of using a PDF link to store all of the content, but that's the only option we can really think of.  Does anyone else have other ideas?

ejackson
Community Champion

A PDF was my initial thought also. If anyone else comes up with a good option, that would be very helpful to our students!

mtuten
Community Contributor

Excellent question.

Creating a PDF/Word Doc version is probably the best course. It is possible for students to disable CSS or all styles in order to reveal all of the content hidden within the tabbed panels; however, any layout or alterations to font appearance that is created via style="" may also be undone.

If disabling CSS seems like a good enough work around, either follow these browser specific directions for disabling CSS, or install one of the following, then (click on the gear icon--if using Chrome), click "CSS," and click "Disable All Styles"

jcole3
Community Contributor

Any idea on how I might change the tab that is initially displayed?

We have observation guidelines for faculty, and in their training course we go through the different areas (which I am just using a combination of columns and tabs on the content page). I want to use the same page layout each time, but modify the code to set a different active tab for different topics.

alyssa_truel-yo
New Member

I realize no one has commented on this page in nearly 4 years but I need help! I'm having trouble formatting images on tabbed pages.  I"m using

<img src="SOURCE" alt="FILE" width="100%" data-api-endpoint="SOURCE" data-api-returntype="File" />

but it only works correctly on the first page. Images on subsequent tabs are tiny, likely 100px, not 100% and it WILL NOT CHANGE.  Any workarounds? 

0 Kudos

Try adding your width as a style attribute and remove the width from elsewhere in the image tag: 

<img style="width: 100%;" src="SOURCE" alt="FILE" data-api-endpoint="SOURCE" data-api-returntype="File" />

0 Kudos

Doesn't work either. Still registers as a pixel not a percent. Thanks though!

0 Kudos

I'm not sure what the need for any sort of extra CSS style code is. I haven't been using any and still get large images inside tabs just by inserting the images in the section where I want them to go:

Tabs_and_Large_Images.mp4 - Google Drive 

Here's the HTML code view:

<div class="enhanceable_content tabs">
<ul>
<li id="topofpanel"><a href="#fragment-1">Image 1</a></li>
<li><a href="#fragment-2">Image 2</a></li>
<li><a href="#fragment-3">Image 3</a></li>
</ul>
<div id="fragment-1">
<p>PUT THE CONTENT FOR THE FIRST TAB HERE</p>
<p><img src="https://maricopa.instructure.com/courses/1159566/files/66569801/download" alt="farrinni-OvZulRsGETg-unsplash_resize.jpg" data-api-endpoint="https://maricopa.instructure.com/api/v1/courses/1159566/files/66569801" data-api-returntype="File" /></p>
<p><a style="color: #ffffff;" href="#topofpanel">Return to top of tabbed panel</a></p>
</div>
<div id="fragment-2">
<p>PUT THE CONTENT FOR THE SECOND TAB HERE.</p>
<p><img src="https://maricopa.instructure.com/courses/1159566/files/66569842/download" alt="irina-iriser-mNz9Pa3tz34-unsplash_resize.jpg" width="775" height="517" data-api-endpoint="https://maricopa.instructure.com/api/v1/courses/1159566/files/66569842" data-api-returntype="File" /></p>
<p><a style="color: #ffffff;" href="#topofpanel">Return to top of tabbed panel</a></p>
</div>
<div id="fragment-3">
<p>PUT THE CONTENT FOR THE THIRD TAB HERE</p>
<p><img src="https://maricopa.instructure.com/courses/1159566/files/66570026/download" alt="sergey-shmidt-koy6FlCCy5s-unsplash_resize.jpg" width="764" height="510" data-api-endpoint="https://maricopa.instructure.com/api/v1/courses/1159566/files/66570026" data-api-returntype="File" /></p>
<p><a style="color: #ffffff;" href="#topofpanel">Return to top of tabbed panel</a></p>
</div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos

I can make images large, no problem, but I want them to be responsive so they work on any size screen.

0 Kudos

I was able to replicate the 'small' image on subsequent tabs after the first tab. There's a CSS style of max-width:100px; being inserted during the render process on any images that have been sized via the RCE. So I removed the images and put them back in without resizing in the RCE (the handles that appear on the corners when the image is selected). Then I added the following code in the style attribute for ONLY the first image:

<img style="width:100%;height:auto;" alt="" src="SOURCE">

The emphasis is width:100%;height:auto;

Here's my new demo video:

https://drive.google.com/file/d/1SVEeaSAJaxxQbcVxq28xdUTFIo63lEFu/view?usp=sharing

This video is currently being processed. Please try again in a few minutes.
(view in My Videos)

I have no explanation for why having a style="" attribute for the first image and none of the other images affects behavior of the subsequent images.

0 Kudos

Follow up question...I am successful at creating tabbed assignments. I want to add a File upload, which I can do without Tabs by hitting +, Drop Down File, Choose File. Is there a way to have this be part of a TAB Set Up?  Thank you!

Tags (1)
0 Kudos

Dunno. This gives me a 100% width image, from an image that's only about 2/3s of the viewable area in native resolution: 

<img id="95495" style="width: 100%;" src="https://doane.instructure.com/courses/5417/files/95495/preview" alt="LEGOs in a bucket" data-api-endpoint="https://doane.instructure.com/api/v1/courses/5417/files/95495" data-api-returntype="File" />

0 Kudos

Works fine on the first tab or on a page without tabs, but it does not work on an image on subsequent tabs.

0 Kudos

No one has asked this yet: is it browser specific? For a while, Canvas and Safari didn't get along, though the problem was image not displayed, but I just want to check if the problem is browser/OS specific.

0 Kudos
ndeatherage
Community Member

I have successfully created tabs for listing assignments within each week of a unit. The tabs are partway down the page, following introductory information for the unit. I am trying to create a link for the current week so that students can click on it to bring them directly to the current week. At the moment, the link only works if it to whatever tab is already visible. For example, if I link it to the week 1 tab, it works fine when the page is opened since that is the default tab that is visible. However, if I then change the link to week 2, it no longer works. Is there a way to get around this problem?

0 Kudos
chemmerly
Community Member

I literally copied and pasted the code provided into a Canvas page to give me a starting point for using accessible tabs. I still cannot use the tab key to navigate through the tabs when I bring up the page. Has something changed in how tabs are used in Canvas since the OP? If it matters, I'm on a Mac using Chrome.

Tags (2)
0 Kudos
Kathleen_cham
Community Participant

The link to the ID group is not working. Is there a new one?

0 Kudos
brent_scholar
Community Member

Follow up question...I am successful at creating tabbed assignments. I want to add a File upload, which I can do without Tabs by hitting +, Drop Down File, Choose File. Is there a way to have this be part of a TAB Set Up?  Thank you!

0 Kudos
InezHayes
New Member

I have created three tabs with one video per tab, however, the video for the third tab is showing on the first and second tab. How can I remove it?

0 Kudos

Hi there, @InezHayes ...

I'm not sure if this code is similar to what you may be using in your own course, but it might look something like this:

<div class="enhanceable_content tabs">
   <ul>
      <li><a href="#fragment-1">Tab One</a></li>
      <li><a href="#fragment-2">Tab Two</a></li>
      <li><a href="#fragment-3">Tab Three</a></li>
   </ul>
   <div id="fragment-1">Tab 1 content</div>
   <div id="fragment-2">Tab 2 content</div>
   <div id="fragment-3">Tab 3 content</div>
</div>

I believe you'd want to make sure that the code for your video would only be showing in line for the div for "fragment-3" (or whatever ID name you gave it).  So, you may have to do a bit of super-sleuthing to find where the code might be living that is making it display outside of where you want...then remove it from that area...and hopefully it will be what you want.

I'm not sure if this helps at all...and this may be a real simple example, but hopefully it will give you some guidance.  Thanks!

0 Kudos
David_Dumonde
New Member

As a visual designer I prefer accordions to tabs. Tabs are problematic for responsive design. First because of the number of tabs and second because of the length of the tab label. If either of these are used on small screens, the tabs will stack on top of each other, making it more difficult to quickly scan the labels to find the content you’re looking for. I have seen this overcrowded tab stacking on some applications where there are a lot of options (looking at you Microsoft Word). This is bad UX. Use tabs only if you have two or three tabs with only one or two words for each label. Test it in a mobile browser or narrow your desktop browser window to be sure the tabs don’t stack. When there is any possibility tabs will stack, use accordions instead.

0 Kudos