Using Tabs in Your Canvas Course

[sulbert]

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>

[Stef_retired]

Great point,  @sphinney ! (Note to self: Repeat the reminder text "below the fold.") :smileylaugh:

[kmeeusen]

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]

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]

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

[jbuchner]

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

[tom_gibbons]

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.

[tom_gibbons]

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!

[kmeeusen]

Yep, fun and easy, Tom!

KLM

[traciebosket]

 @kmeeusen ​

Thanks Kelley, I appreciate it

[caitlin_stiles]

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]

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]

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]

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"

• Web Developer add-on for Mozilla Firefox
• Web Developer extension for Google Chrome
• Web Accessibility Toolbar for Internet Explorer

[jcole3]

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]

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? 

[tom_gibbons]

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

[alyssa_truel-yo]

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

[themidiman]

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

[alyssa_truel-yo]

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

[themidiman]

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.

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.

[brent_scholar]

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!

[tom_gibbons]

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

[alyssa_truel-yo]

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

[jbuchner]

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.

[ndeatherage]

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?

[chemmerly]

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.

[Kathleen_cham]

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

[brent_scholar]

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!

[InezHayes]

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?

[Chris_Hofer]

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!

[David_Dumonde]

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.

[hoitung]

I use tabs frequently. Recently, we start using textbooks from Open Educational Resources. We could copy and paste the HTML code to the editor of a page easily. Though each chapter/module is very long. Bootstrap tabs are perfect. However, the textbooks have links to key term or reference within the same module/chapter. Since the tabs are only cosmetically pleasing, all content is still on the same page, the links within the page would only stay on the first tab.

Is there anything that allows a link on the first tab jumping to another tab? Thanks.

[NancyShefferly]

Hi-- We've solved this by using the link the to whole page, but tacking "#tab-x" onto the end of the link.  Most of the time, we put these links in a "menu" on the first tab portion of the page. When displayed in the student view, the students click the link to jump to specific activities/content on other tabs.

Like everything else with tabs, though, the HTML seems pretty easy to break when editing formatting on the page. 

[DAVIDSTRAUSS]

I love the use of tabs on a PC.  However, my students all use iPads, and the tabs don't show up the same on a tablet.  Is there a recommendation for tabs on an iPad?

[Chris_Hofer]

Hi @DAVIDSTRAUSS ...

This isn't necessarily an answer to your question, but I do know that people have offered up code snippets like the ones at the top of this thread and other similar topics here in the Community.  Although those code snippets work (for now) on a web browser on your computer, they do not work well on a mobile device such as an iPad or iPhone.  My understanding is that Instructure has said they were going to retire code snippets like this...which @James has told me the following:

---

The tabs and accordions were done using JavaScript. More precisely, the jQueryUI library. Canvas said they were deprecating the enhanced_content and offered up a solution that people could add to their global custom JavaScript that was added through the Themes.

---

All this is to say that eventually the tabs may not work as well on a standard web browser in addition to not already working on a mobile device...so maybe use at your own risk.

I hope this will help a bit.