[ARCHIVED] 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>

[Renee_Carney]

 @sulbert ​

This looks like a great resource for Canvas users!  To help people find it I am going to move it to the Instructional Designers​ group. 

[caitlin_stiles · Accepted solution]

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

[stephanie_johns]

Hi Caitlin, I'm might be answering the wrong question . . . I created a test module with three pages and copied and pasted the HTML code into each page. Each page had tabs.

[lhenning]

I love this idea!  I do have a question, however...

I have just been reminded of the ADA complications (text readers, etc) in using tables for design of Pages; do you know if creating tabs cause similar issues?

Thanks,

Lindsay

[stephanie_johns]

The author says the following above. However, I would want to test this feature first to ensure that Canvas-supported screen readers do work. See Accessibility in Canvas.

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

--Stephanie J

[stephanie_johns]

See my posting below on using the NVDA screenreader.

[mtuten]

I'm still new to my screen reader (so maybe this is common practice and I don't know it) but I found that you can't use the tab key to get to the link that opens the other tabs. Once you get to the link for the first tab, you use the down key to access the other tabs (same is true for the accordion). To hopefully make things easier for screen reader users especially, I try to add a link to the bottom of my tabbed pane that takes the user back to the top of the tabbed panel. In the code pasted below, the links are whited out (style="color: #ffffff;") mainly because some professors may be picky and not want to have them at all.

Code for Panel

If you do multiple panels on a page or nest panels inside of panels, change the bold blue text.

<div class="enhanceable_content tabs">
<ul>
<li id="topofpanel"><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">
<p>PUT THE CONTENT FOR THE FIRST TAB HERE</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><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><a style="color: #ffffff;" href="#topofpanel">Return to top of tabbed panel</a></p>
</div>
</div>

[RobertGibson]

This code is interesting because in my experiments it allows the keyboard right and left arrows to cycle across the tabs.

[stephanie_johns]

Thanks for sharing this! I also have concerns about screen-reading success. Can JAWS and NVDA parse this layout? If so, then it opens up a wonderful course organization and design option.

--Stephanie J

[stephanie_johns]

Using NVDA to read tabbed pages in Canvas

I did some minimal research into and testing of the accessibility of tabbed pages in Canvas.

In general, if coded correctly, tabs are an accessible "widget," to use the technical term. See W3C: Accessible Rich Internet Applications (WAI-ARIA) 1.0. Note that the home page of NV Access​ features a tabbed section.

Process

1. I downloaded the free screenreader from nvda.org.
2. I created a Canvas test page in my sandbox account and ran the NVDA screenreader using Chrome, my default browser.
3. I ran the NVDA screenreader using Firefox.
4. I ran the NVDA screenreader using IE/Microsoft Edge.

Results

• Chrome: NVDA did not read the tabs.
• Firefox: Read the tabs and page content correctly.
• IE/Microsoft Edge: Read the tab title PLUS the full URL of each tabbed page (h-t-t-p-colon-blackslash-etc.). Bug?

Caveats

• I did not try to configure any of the browsers in any way, and I don't know (too lazy) which browser versions I'm using.
• I did not try to configure NVDA. I downloaded it and immediately let it talk. I had never used it before.
• I "tested" only on a Windows 8 PC.

Implications

• Students can use only Firefox if running NVDA? This might be too much of a limitation if true.
• More rigorous and detailed testing of this feature is required across OSs and browser combinations if you want to ensure accessibility.

Download NVDA screenreader​

[tom_gibbons]

If you're using NVDA, you'll want to use Firefox, in general. It's the recommended browser, reference to which you can find on their GitHub page.

The limitations that you're running into aren't necessarily with the code, but with the testing environment. The code itself is laid out as a list, which should render just fine from the HTML. The visual tabbing display is being invoked through the css, which isn't something that a screenreader is going to pull down. The list of tabs isn't any different than any other list, aside from being wrapped in a div. Did you test any other bulleted lists of links with Chrome and NVDA?

[kmatson]

Thank you for sharing this code.

Karen Matson

[eliams]

Thanks for sharing! This is incredibly helpful for organizing information. I appreciate it.

Best,

Sheryl

[sphinney]

In many instances I think a page with tabs can be quite useful, so thank you for this information. However, I would like to suggest that course designers carefully consider the application and the user experience if considering tabs. In my own experience, when navigating a Canvas course that used tabbed pages in addition to Canvas' native "Previous" and "Next" navigation, I found that I missed even seeing the tabs on the page and would instinctively click "Next". I only noticed my mistake when the information that I had advanced to referenced information that I had missed reading in some of the tabs. So I had to back-track and then go through the tabs. This may be a minor issue, but something to consider. One added consideration, if you're using requirements in Canvas to track and help students track their progress, using tabs may be troublesome since there is no way to track whether students have viewed all the tabs.

[Stef_retired]

 @sphinney , I agree wholeheartedly with your observation. By far the biggest design issue we've encountered with our tabbed interfaces is that our learners either fail to notice or forget that the page offers a number of tabs, and their inclination is indeed to click on the "Next" button rather than working their way through all of the tabs before proceeding. So they miss valuable resources that they don't realize they haven't seen until they get to the mastery quiz.  :smileyconfused:

We have tried to mitigate this in our design by placing a note at the top of each table directly below the tabs. The note reads:

The [x number of] tabs shown above include important resources for your training.  Please read through all of them before proceeding to the next page, and refer back whenever necessary.

[sphinney]

Stefanie, that sounds like a great solution to the "invisible" issue. I was also thinking that you could style the tabs a little to make them stand out more to the sighted visitors. But I like your solution better as it would also help if a visitor is using a screen reader, and the reader for whatever reason skipped the tabs or they just missed hearing them when they were read.

[kmeeusen]

Stefanie:

I am a big fan of tabs for all the reasons stated by most on this page, and it is one of the hacks I feature when I present a "Do Not Fear the Code!"  (CanvasHacks Demo Course turned into a live or webinar presentation) workshop to users.

I always include a message similar to your to alert sighted users, and the <h2> header tag for screen readers. However, I have just begun experimenting with using background colors inserted into the  tab titles to better draw attention to them. Works real nice, and you can use the same background color to each tab page. Just have to make sure to maintain a decent contrast ratio.

KLM

[mtuten]

I have some code related to this that you may find useful:

Colored Tabbed Panel

• Part 1: Get Assignment and Create Transcript File
• Part 2: Add and Edit Transcript
• Part 3: Turn in Stage 1

Part 1: Get Assignment and Create Transcript File

Return to top of tabbed panel

Part 2: Add and Edit Transcript

Return to top of tabbed panel

Part 3: Turn in Stage 1

Return to top of tabbed panel

Code for coloring

(Image below was created via Slack--Yay Slack for IDing colors!)

<div class="enhanceable_content tabs">
<ul style="background-color: #ffffb2 ;">
<li id="topofpanela" style="background-color: #d9ffb2;"><a href="#pfragment-1">Part 1: Get Assignment and Create Transcript File</a></li>
<li style="background-color: #ffb2ff;"><a href="#pfragment-2">Part 2: Add and Edit Transcript</a></li>
<li style="background-color: #b2ffff ;" ><a href="#pfragment-3">Part 3: Turn in Stage 1</a></li>
</ul>
<div id="pfragment-1" style="background-color: #ffd9b2;">
<p>Part 1: Get Assignment and Create Transcript File</p>
<p><a style="color: #ffffff ;" href="#topofpanela">Return to top of tabbed panel</a></p>
</div>
<div id="pfragment-2" style="background-color: #ffd9b2 ;">
<p>Part 2: Add and Edit Transcript</p>
<p><a style="color: #ffffff;" href="#topofpanela">Return to top of tabbed panel</a></p>
</div>
<div id="pfragment-3" style="background-color: #ffd9b2;">
<p>Part 3: Turn in Stage 1</p>
<p><a style="color: #ffffff;" href="#topofpanela">Return to top of tabbed panel</a></p>
</div>
</div>

Classier panel

• Track 1: Build on YouTube Autocaptions
• Track 2: Transcribe from Scratch

content

Return to top of tabbed panel

content

Return to top of tabbed panel

Classy (gray) panel code

<div style="border: 2px solid #c4c5c7;">
<div class="enhanceable_content tabs">
<ul style="background-color: #c4c5c7;">
<li id="topofpanelb" style="background-color: #ffffff;"><a href="#fragment-1c">Track 1: Build on YouTube Autocaptions</a></li>
<li style="background-color: #ffffff;"><a href="#fragment-2c">Track 2: Transcribe from Scratch</a></li>
</ul>
<div id="fragment-1c">
<p>content</p>
<p><a style="color: #ffffff;" href="#topofpanelb">Return to top of tabbed panel</a></p>
</div>
<div id="fragment-2c">
<p>content</p>
<p><a style="color: #ffffff;" href="#topofpanelb">Return to top of tabbed panel</a></p>
</div>
</div>
</div>

[mtuten]

So, the tabbed panels in the post above do not appear the same way that they would in the course. They do however, appear the same way as they would on a mobile device...

I think someone hypothesized that adding a percentage width to the tabs would help? Haven't tried it yet.

[mtuten]

So I tried adding a width, but it didn't help (not that I'm surprised).

[kmeeusen]

Thank you for trying, it is greatly appreciated.

[mtuten]

Update: I have meddled with the code a bit more. It's still not the prettiest thing in the world, but I think it's about as close as we'll get. I did increase the font size and line height for the tabs so that they should be easier to click on mobile devices. If you don't like it, remove line-height: 120%; and font-size: large;.

Compensating for Mobile View

Since the app does not make the tabbed panels appear correctly, I tried to make lemonade out of lemons (glad I caught that I almost wrote that phrase backwards :P). Here's what I ended up with. The code used for the Table of Contents title is actually borrowed from another capability in Canvas (popups). (More info on popups can be found under this other discussion on tabs--probably elsewhere too, but this is where I picked it up) I added a "Table of Contents" to a dialog/popup box and did not create the corresponding link. Since the apps aren't displaying the popups correctly either, the popup contents are visible in the app but invisible in the browser.

If I remember correctly, the desktop screen reader skips over the unopened popup text. I don't know what the mobile screen reader does, but if it does skip it and reads like a normal tabbed panel, I don't think it would be much of an issue.

Table of Contents

• Tab 1
• Tab 2

---

Tab 1

content

Return to top of tabbed panel

---

Tab 2

content

Return to top of tabbed panel

Code for Compensated Table

<div style="border: 2px solid #c4c5c7;">

<div class="enhanceable_content tabs">

<div class="enhanceable_content dialog" style="padding-left: 5px;">

<h2>Table of Contents</h2>

</div>

<ul style="background-color: #c4c5c7; color: #c4c5c7;">

<li id="topofpanelb" style="background-color: #ffffff; font-size: large; line-height: 120%; margin: 1px;"><span style="padding-left: 6px;"><a href="#fragment-1c">Tab 1</a></span></li>

<li style="background-color: #ffffff; font-size: large; line-height: 120%; margin: 1px;"><span style="padding-left: 6px;"><a href="#fragment-2c">Tab 2</a></span></li>

<div id="fragment-1c" style="padding: 5px;"><hr style="border: 1px solid #c4c5c7;" />

<h2>Tab 1</h2>

<p>content</p>

<p><a href="#topofpanelb">Return to top of tabbed panel</a></p>

</div>

<div id="fragment-2c" style="padding: 5px;"><hr style="border: 1px solid #c4c5c7;" />

<h2>Tab 2</h2>

<p>content</p>

<p><a href="#topofpanelb">Return to top of tabbed panel</a></p>

</div>

</div>

</div>

[kmeeusen]

Now I'm certain - you are my new bestie

Agent K

[mtuten]

So I've done some more tinkering with tabs. I didn't try to make these panels mobile-app-friendly, but see my earlier post for my latest attempt at mobile friendliness.

Tabs at the top and bottom

• Track 1: Build on YouTube Autocaptions
• Track 2: Transcribe from Scratch

content 1

Return to top of tabbed panel

content 2

Return to top of tabbed panel

• Track 1: Build on YouTube Autocaptions
• Track 2: Transcribe from Scratch

<div style="border: 2px solid #c4c5c7;">

<div class="enhanceable_content tabs">

<ul style="background-color: #c4c5c7;">

<li id="topofpanely" style="background-color: #ffffff;"><a href="#frag1c">Track 1: Build on YouTube Autocaptions</a></li>

<li style="background-color: #ffffff;"><a href="#frag2c">Track 2: Transcribe from Scratch</a></li>

</ul>

<div class="enhanceable_content tabs">

<div id="frag1c">

<p>content 1</p>

<p><a style="color: #ffffff;" href="#topofpanely">Return to top of tabbed panel</a></p>

</div>

<div id="frag2c">

<p>content 2</p>

<p><a style="color: #ffffff;" href="#topofpanely">Return to top of tabbed panel</a></p>

</div>

<ul style="background-color: #c4c5c7;">

<li style="background-color: #ffffff;"><a href="#frag1c">Track 1: Build on YouTube Autocaptions</a></li>

<li style="background-color: #ffffff;"><a href="#frag2c">Track 2: Transcribe from Scratch</a></li>

</ul>

</div>

</div>

</div>

Tabs are sadly not synchronized (yet). So, if you click on the first tab at the top and then the second tab at the bottom, the top will still appear as if you are still on the first tab.

Tabs at the bottom

content 1

Return to top of tabbed panel

content 2

Return to top of tabbed panel

• Track 1: Build on YouTube Autocaptions
• Track 2: Transcribe from Scratch

<div style="border: 2px solid #c4c5c7;">

<div class="enhanceable_content tabs">

<div id="fragment-1z">

<p>content 1</p>

<p><a style="color: #ffffff;" href="#topofpanelz">Return to top of tabbed panel</a></p>

</div>

<div id="fragment-2z">

<p>content 2</p>

<p><a style="color: #ffffff;" href="#topofpanelz">Return to top of tabbed panel</a></p>

</div>

<ul style="background-color: #c4c5c7;">

<li id="topofpanelz" style="background-color: #ffffff;"><a href="#fragment-1z">Track 1: Build on YouTube Autocaptions</a></li>

<li style="background-color: #ffffff;"><a href="#fragment-2z">Track 2: Transcribe from Scratch</a></li>

</ul>

</div>

</div>

[kmeeusen]

Michelle, you are fastly becoming my newest bestie!

Thank you so much for all of this.

You rock!

KLM

[traciebosket]

Hi  @kmeeusen ​

How do you add tabs on pages? Is there a way to do that without coding? (I see tabs in all kinds of courses and it sees like it should be easy to do that.)

[kmeeusen]

Tracie:

Unfortunately, at this time it can only be done using HTML code and the HTML Editor.

Do you need the code snippet for that? Silly question, I will past it below................

3 Simple Tabs

<div class="enhanceable_content tabs">

<ul>

<li><a href="#fragment-1">PUT TITLE FOR TAB 1 HERE</a></li>

<li><a href="#fragment-2">PUT TITLE FOR TAB 2 HERE</a></li>

<li><a href="#fragment-3">PUT TITLE FOR TAB 3 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>

[traciebosket]

Thanks Kelley!

[kmeeusen]

Hi Tracie:

We have found an issue with how the simple expandable tabs render on mobile devices. I think the solution might lie in being able to give the tab headers a % width parameter, and I am hoping that one of the actual coders in here will respond with a fix.

In the meantime, I just wanted to make you aware of this.

KLM

[jbuchner]

Can you give the headers a width attribute in html? I though that only worked for tables.

[kmeeusen]

John:

I am not a coder, so that was what I was asking - can this be done? I certainly have no idea and was hoping smarter folks than I would come along and help.

The <Li> tag defines a list level, which in the case of tabs, is a list consisting of links to the identified content which in turn are overlapping fragments of a page, or more precisely Div boxes. Because I do not understand the underlying code in Canvas that makes it possible to display this snippet as tabbed content, I do not know if our where width attributes could be applied.

KLM

[tom_gibbons]

You can set a style="width: XX;" on those list items and it will apply to the tabs. Here's an example​ I set the tab width to 19% for each. You still get some problems in small browser views, but if you collapse the persistent nav, it works.

[kmeeusen]

Thanks  @tom_gibbons ​!

[eliams]

Thanks Kelley,

I hope they can as well. I love having Tabs! The table effect shows on my computer as well as mobile. The only solutions I've found in browsing all involve js or manipulating the CSS, which isn't feasible for most. My allure to this feature is making changes in the content editor.  I also changed headers and font color to denote text when adding the extra <hr> lines on the individual tabs. It's quirky, but having the clean space to chunk without additional pages and extra navigation just makes me happy for now. Thanks for the update.

[caitlin_stiles]

Tracie, I hear your hesitation! I was reluctant to tackle coding as I only have/had a basic understanding of coding but this is fairly straight forward if you can commit the time to build the first page. Good luck!

[penny_christens]

Stefanie that is thoughtful wording - which I can use immediately. THANK YOU!

[Stef_retired]

You're welcome,  @penny_christens !

[stephanie_johns]

Are you introducing or modeling the page before students start the instructional modules and pages? I use a required "getting started" module along with easy assessments to make sure students can take a quiz, post to a discussion, send me an email, and submit an assignment. (I lock the instructional modules until the student completes every activity in the getting started module.)

One idea is to create a "Reading Tabbed Pages" content page with tabs in the course getting started or other introductory section. On the first tab, start to present the "how to read" instructions or even a story of some kind, then continue the story on the remaining tabbed pages. Then I would create a mini-quiz (scavenger hunt?) with a question about the content on each page. As a heuristic, students then have had at least one exposure to the format. Then, on the first tabbed page in a "real" module, I would provide scaffolding/reminders to read each tabbed page. Subsequently, I would add a link to the "Reading Tabbed Pages" page, which in itself might remind students that there are "hidden gems" beyond the first tab.

Another idea is to have a mini table of contents on the first tab. Or activate learning with a series of questions, related to the tab contents, for example, "What are the implications of X?  (Tab 2: About X)" Or similar organization.

[sphinney]

I like the idea of providing something that explains the use of tabs. However, in my experience, even when I had gone through several pages and had used the tabs on previous pages, I would still forget about them. They just were not apparent to me all the time, as I would become engrossed in the reading and when I got to the bottom, the "Next" button was staring me in the face so it was just natural to click on it. This was even more of an issue when the tabbed content that I was reading led me down below the fold so that the tabs were not immediately visible in my browser's current viewing area. Your reminder note, that you suggested earlier, might be placed at the bottom to mitigate that issue.