[ARCHIVED] Tabs

[brad_hinson]

We are developing bilingual courses and programs at my institution and have a need for tabbed content (English | Spanish) so our students can compare/contrast content side by side.  Our institution does not have javascript enabled for non-admins and the editor strips out all the goodies (CSS, javascript, etc).  I'm a power-user, but not an admin.   Given this context - can I create jquery-esque tabs in Canvas pages?  Is there a workaround that anyone knows of... ?

I see many have successfully done some nice nice UI as admins with Canvas universally enabled, but what if the bells and whistles are not enabled?  Ideas, tips, tricks welcome...

Brad

[Chris_Hofer]

Hi  @brad_hinson ​...

You might want to talk with one of your admins to see if the global CSS or JavaScript could be tweaked.  If you take a look at this (replacing "YourSchoolName" with your own Canvas URL):

https://YourSchoolName.instructure.com/styleguide#tab_navigation

You might be able to use tabs in this way.  Would that work for you?

[brad_hinson]

Thanks Chris...    Yes, the tabs from the style guide would be perfect.  I've successfully gotten them to render via CSS in the page editor, but they don't work as the javascript is stripped out of the page editor.    I am appealing to my Canvas admins, but they have traditionally not been very open to mods.  Their first response wasn't very hopeful, but I'm still asking.  It's a reasonable, pedagogical, need but I'm not very optimistic. 

So my challenge is how to do this without the mod.  Hmmmm.  

[kona]

There's ​also an LTI tool that allows people to add their own tabs and name them anything they want! I'm pretty sure teachers can do it themselves for their courses.

[brad_hinson]

I've been combing the apps looking for an angle, but no luck so far.  Any idea which app? It may not be enabled in our instance... 

[awebster · Accepted solution]

Maybe this is what you are looking for??

Here is some HTML code that would allow you to do the tabs in the individual pages. You have to have a decent (more than beginner, but not totally advanced) knowledge of HTML to work with this code though because I've found editing it in the page view doesn't work quite so well. If you edit the content in the HTML view within the opening and closing tags then it works pretty slick.

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

[brad_hinson]

Hey Amanda - that did the trick!  I've been tinkering with a pure css approach but couldn't get anything that wasn't 'cleansed' by the page editor.  So I thought I would somehow leverage the Canvas css, but no luck so far.   Looks like that's what this does - is that right?

thanks so much!

Brad

[awebster]

Ya, the DIV tag is defined somewhere in the Canvas CSS (I don't have a full understanding of how that all works but I'm going to have my admin give me a lesson). I just know the code works!

[adam_b_nemeroff]

So how did you know that this would work?

Also, can we see a screenshot of the final result?

[mpoole]

I know you weren't asking me but here's the demo I just made to try out the code:

[awebster]

I got the code from @RebeccaLindsay at Utah Valley University. I've used it in many courses, that's how I know it works.

[10650941]

Thanks Andrea.  I find that if I put tables inside the <div> tags, it it is easier to edit in the Rich Content Editor view.  It is also more difficult to delete table tags than it is to delete <div> tags.  This makes it easier for instructors to edit.  The caveat for using tabs, accordions, etc., is that they don't work on mobile devices.  The tabs and accordions seem to render out as unordered lists on mobile devices. 

I have used tabs in multiple courses, mostly to keep scrolling to a minimum and to make the pages a wee bit more interactive.  I have used them to chunk content, to lead students through a series of activities, and to break up video segments.  How have or will you use tabs and accordions in your classes? 

Attached are the accordions with tables and tabs with tables.

[isaac_piercy]

Thanks for this code - it worked great!

I've found it's pretty easy to design each of my "tabs" as separate content pages, then when I'm done just grab the HTML and paste it into this template. Thanks again!

[jperkins]

So awesome that you shared this! Not only do tabs work, but with a little bit of dinking around I also got the accordion to work! It needs a little bit of cleaning up (padding, spacing, etc...), but I was thrilled that it was working! Just wanted to share. If I have time I'll add the other stuff.

<div class="enhanceable_content accordion">

<div>PUT TITLE FOR TAB HERE</div>

<div>

<h3>Content 1</h3>

<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

</div>

<div>PUT TITLE FOR TAB HERE</div>

<div>

<h3>Content 2</h3>

<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

</div>

<div>PUT TITLE FOR TAB HERE</div>

<div>

<h3>Content 3</h3>

<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>

</div>

</div>

[jperkins]

I was digging around in Github and found a lot of awesome code related to this enhanceable_content. See the original file here.

Really awesome stuff I found:

• Popup Dialog - This works without any Javascript, however the popup is defined as only being 300px wide. The class defining this width is ui-dialog. You should be able to adjust the styles in a global CSS file.

<div id="dialog_for_link1" class="enhanceable_content dialog">dialog for link 1</div>

<a href="#dialog_for_link1" id="link1">link 1</a>

• Draggable Elements - This works, I don't know when I'd use it, but it is pretty cool.

                <div class="enhanceable_content draggable" style="width: 100px;">draggable</div>

• Resizable Elements - This adds the lines in the bottom left corner of a <div> tag to adjust the size of an element.

               <div class="enhanceable_content resizable" style="width: 100px;">resizable</div>

• Sortable Elements - This code allows for the drag and drop resorting of items, like in Modules, or Assignment Groups.

<ul class="enhanceable_content sortable" style="display: none;">

        <li>item 1</li>

        <li>item 2</li>

</ul>

I'm interested in hearing any ideas of how to use these to enhance your courses!

[Chris_Hofer]

Is there a way to get a bit of space between the the body of the tabs and the border...so that the letters are right up against the "wall"?

[jperkins]

 @Chris_Hofer ​ Are you trying to increase the space between the body of the tabs and the border? Or reduce? Your question confused me a little...

Regardless, the code on Github is a little bit different than what Amanda shared, not much but a little (there is a span around the tab titles). It seems give more space between the tab titles and the lines around the tab titles...

<div class="enhanceable_content tabs">

        <ul>

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

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

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

        </ul>

        <div id="fragment-1">

            <p>First tab is active by default:</p>

            <pre><code>$('#example').tabs();</code></pre>

        </div>

        <div id="fragment-2">

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

        </div>

        <div id="fragment-3">

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

        </div>

</div>

Let me know if that solves your problem.

[Chris_Hofer]

Hi  @jperkins ​...

I was actually referring to the accordion.  See how the text is right up against the left border of the accordion?  How can we get some white space (a sort of "buffer") between the border (on all sides) and the text?

[jperkins]

You need to add style="padding: 10px;" to the <div> that the accordion content lives in as in the code example below. You can adjust the value from 10 to something bigger or smaller if you bigger or smaller borders. To learn more about how to use padding, click here.

<div class="enhanceable_content accordion">

<h3><a href="#">Section 1</a></h3>

<div style="padding: 10px;">

<p>Section 1 Content</p>

</div>

<h3><a href="#">Section 2</a></h3>

<div style="padding: 10px;">

<p>Section 2 Content</p>

</div>

<h3><a href="#">Section 3</a></h3>

<div style="padding: 10px;">

<p>Section 3 Content</p>

<ul>

<li>List item one</li>

<li>List item two</li>

<li>List item three</li>

</ul>

</div>

</div>

[Chris_Hofer]

That worked...thank you,  @jperkins ​.  Now if we could just get it so the accordion sizes aren't all the same (right now it defaults to the largest one with the most content in it...leaving others to have a lot of white space below the content).

[jperkins]

Unfortunately that is one that is currently unfixable. I spent an hour with one of our engineers at Hack Night trying to do that. We don't have a current enough jquery library in Canvas. So unless you host your own jquery library in the global Javascript and reference it (and I'm not even sure if that would work), the jquery code needed to accomplish that doesn't exist in Canvas.

[martil29]

Hi Jeremy,

I know this post was a while ago but I just wanted to thank you! I love the accordion style. However, I keep getting a vertical scroll bar along the length of the page. Do you have any thoughts on that?

Lisa

[martil29]

Oh, I just figured it out. I put a <p> code at the end of the page and that worked.

[kmcpher1]

This is terrific! Thank you!

[bwood1]

How can we make this work correctly from the iPad app?

[Shar]

Hi @bwood1 ,

You cannot get the same tabbed interface in the mobile app as you do on the desktop. In mobile, the tabs become a clickable table of contents that will jump to the correct content on the page. This feature works as intended and is great for organizing large chunks of content on a long page, but should still be used sparingly

If you're looking for something to "hide" content on the page I'd like to suggest the Details tag. It works like an accordion with a toggle/click to reveal and will work in the Canvas mobile apps.

Here's an example:

<details>
<summary>Assessment and Reflection Instructions</summary> And here are the instructions
</details>

Details collapsed

Details expanded

The Details tag is HTML5 and accessible - the screen reader will announce it as "button - collapsed" and allow the user to click on it to expand.

Hope the details tag does the trick for you,
Cheers - Shar ⭐

[mpoole]

I am super excited about this awebster​!  You have totally made this nerd's day!

[awebster]

There is a Canvas Hacks classroom where a few of us are sharing code like this. If you want to be added, I can do that. Let me know (I'll need your email address).

[kona]

awebster, are you going to add the Tabs code to the Canvas Hacks Course? I think it would make a great addition! 🙂

[awebster]

Yes, I will add it. I am still playing catch-up from InstructCon

[jshepard]

I would love to be added to this. My email is jshepard@oconee.k12.sc.us

[awebster]

Added.

[tracy_stuntz]

please add me too - tracy.stuntz@cloviscollege.edu

[stephanie_pope]

Just to add a little something to this...I've had success adding video to the tabs! It looks really good.

[tankovpa]

A lot of folks have done a great job describing how to create pages with tabs. There is a group Instructional Designers​ that may be a great option for folks to join if they are interested in this or related topics. In that group there is a thread Using Tabs in Your Canvas Course that goes into this topic and may be worth checking out by folks who are want to give this a try.

[mtuten]

If we have so many tabs or tabs with such long titles that the tabbed panel has to have two rows of tabs, is there a way to make the tab rows rotate so that the row with the active tab is always closest to the content of the active tab? Basically what I want is something like this:

Video example of rotation tab rows​

[mtuten]

Thanks again to everyone who found/shared the code for tabs. I love them.

So I've been playing around with tabs, accordions, and some of the other features mentioned here. Below is what I've learned.

Tabbed Panels

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 your keyboard's tab key to get to the links that opens the other tabs. In order to access the other tabs, you must land on the link of the first tab and then 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>

I know that some folks (including myself were afraid that students would page through the Canvas course and not realize that there were tabbed panels embedded on the page, so I played around with some colors that would generate some attention.

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>

Tabbed Panel Appearances

So, the tabbed panel examples in this post 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...

Figure 1: How tabbed panels appear in Canvas from desktop browser

Figure 2: How panels appear in Android Canvas app (appearance is similar in iOS Canvas app)

I think someone in a different thread hypothesized that adding a percentage width to the tabs would fix the mobile display, but, when I tried, it didn't.

In addition to appearance, the links for the tabbed panel do not work correctly in the iOS app. Instead, the links open the browser version of Canvas on your Apple device.

In Android, the links work fine.

Moving Forward

Because we really like the tabbed panel's organizational capabilities, we are looking into alternately embedding tabbed panels built with third party content. Nothing has come of it yet, but if that changes, I'll update you.

---

Accordion

As said earlier, if you are a screen reader user and you are on a page with an accordion element, using the tab key on the keyboard will not get you to the next accordion panel. In order to access the other panels, you must land on the link of the first Accordion item and then use the down key to access the other Accordion items (same is true for tabbed panels). Like with the tabbed panels, I try to add links that allow screen reader users to more easily return to the top of Accordion elements. 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 accordion">
<div id="topofaccord">PUT TITLE FOR ACCORDION TAB 1 HERE</div>
<div style="padding: 10px;">
<h3>Content 1</h3>
<p>paragraph text</p>
<p><a style="color: #ffffff;" href="#topofaccord">Return to top of accordion</a></p>
</div>
<div>PUT TITLE FOR ACCORDION TAB 2 HERE</div>
<div style="padding: 10px;">
<h3>Content 2</h3>
<p>paragraph text</p>
<p><a style="color: #ffffff;" href="#topofaccord">Return to top of accordion</a></p>
</div>
<div>PUT TITLE FOR ACCORDION TAB 3 HERE</div>
<div style="padding: 10px;">
<h3>Content 3</h3>
<p>paragraph text</p>
<p><a style="color: #ffffff;" href="#topofaccord">Return to top of accordion</a></p>
</div>
</div>

Accordion Appearances

The biggest drawback to using accordions is that the panel size is dictated by the pane with the greatest amount of content. So, if you have 1 sentence in the first pane and then you have 5 paragraphs in the next pane, the first pane will be big enough to contain the five paragraphs:

Demonstration of Accordion size differences

The other drawback (which you will notice is pretty common among these elements) is that it does not display correctly in mobile. In the video above, we saw how the accordion appears in the browser version of Canvas. Below is how it appears in the Canvas app on Android:

---

Pop-up Dialog

I think this feature could be very useful, particularly in how-to lists. I want to use this item to hide steps in my instructions that many students may find demeaning (for example, detailed instructions on how to use right click or shortcut keys to copy and paste content). It is screen reader accessible. Screen reader users can use the tab key to reach the close button on the dialogue and their focus should be back on the link that opened the dialogue.

(sorry that the image didn't include an example of how I'd use it in the how-to list, but that is how it looks in the desktop browser)

When using this tool, consider adding instruction on how to resize the pop-up for slightly easier viewing.

Unfortunately, like the other useful elements, this element isn't mobile friendly.

• In Android app (shown above), the dialogues are visible and the links act the same way that same-page links do
  
  • because of this, I strongly advise putting the dialogues below the links
  • consider leading your dialogue section with an unlinked dialogue that contains a section title and explanation for why Android users see this content differently).
• In iOS, the links take you the the browser version of Canvas. There the links will act normally.
  • Consider adding a warning to iOS users so that they aren't alarmed by having to login again and they know to switch back to the app once they finish viewing the page

---

Draggable and Sortable Elements

These element don't seem very useful to me, and, as far as I can tell, both are inaccessible to screen reader users.

In the Android mobile app, the Sortable List element is completely invisible, and the draggable item can't be moved.

---

Resizeable Element

As this element seems to only effect textwrapping and does not hide content as if in a frame, I'm not sure how this item could be used in a course, but I would strongly suggest that, if they do, they add a border around the element and provide instruction on how to adjust the resizeable element.

<div class="enhanceable_content resizable" style="width: 100px; border: 1px solid #000000; padding: 5px;">resizable</div>

This element cannot (as far as I'm aware) be adjusted by screen reader users; however, the screen reader can still access the content inside the resizeable element. However, in the Android mobile app, the lines used to grab the the element are not visible and the div is not resizeable.

---

Mobile Screen Readers

As most of this content does not display correctly on mobile devices, it wouldn't surprise me if mobile screen readers also read the content incorrectly. I'm really not interested in testing it out right now, so if someone wants to beat me to it, please do.

[mtuten]

So I played with the popups some more and found that if you add title="..." the popup will have a title.

And since I didn't include this in my last post, the content in bold and blue will need to be changed if you have multiple popup links on your page (I have not tried nesting popups, but I wouldn't recommend it).

<div id="dialog_for_link1" class="enhanceable_content dialog" title="dialog title">dialog for link 1</div>

<a href="#dialog_for_link1" id="link1">link 1</a>

If you want to have multiple links to the same popup, you can keep the #dialog_for_link1 text, but I think you will still need to change the link id.

Also, you may want to check out my post on Using Tabs in Your Canvas Course that tries to compensate (in part) for the apps' distorted display of tabbed panels. I used an unlinked popup box to create a title for the tab section that will disappear in the desktop view but reappear in the app view.

[BethCrook]

First of all, this is amazing!  Thank you!   Is there a way to make the default accordian so that the first "tab" is not automatically opened on page load?   Does that make sense?

[mtuten]

@Beth Crook I haven't found one yet, but if it was really important that the first item be closed, you may want to consider using the Toggle element instead.

There are some added issues with toggles.

• Content that is initially hidden when the page loads will not be accessible to app users
  • Workaround: copy all hidden content to an unlinked pop-up/dialog box that is after the closing tag of the area controlled by the toggle (dialog code is two posts above this post)
• Toggles are treated as button so make sure that screen reader users know that they need to use their screen reader to jump from button to button in order to access the toggle as the tab key will skip over it.
  • (There's probably a way to fix it, but I haven't found the right code yet. Tabindex isn't on the whitelist...)
• Often extra effort has to be put into making a toggle look clickable. I do not have a way to visually represent (such as a slide on a switch or a change in color) that the toggle has been clicked.
• Toggles will not automatically collapse when another toggle is turned on.
  • There may be a way to make it do that, but usually it will cause the primary switch to require two clicks before the hidden content will appear again (in the code, if you use a second switch to hide the element, the primary switch still thinks that the element will open and thus will need to be switched to the off position before it will resume normal behavior)
• Strangely enough, you can't put a toggle inside of a list (or at least I haven't been able to).

Here's the code (stuff in blue bold and surrounded by ** must always be edited; stuff that's bold and surrounded by * will need to be edited if there are multiple toggles; stuff that is underlined controls whether or not the toggle is open when the page is loaded):

<p><span class="element_toggler" role="button" aria-controls="*group_1*" aria-label="**Switch** toggle toggles **list** visibility" aria-expanded="false"><i class="icon-mini-arrow-down"></i> **Switch**</span></p>

<div id="*group_1*" style="display: none;">**hidden stuff**</div>

[Dialog with copy of hidden content would go here]

Just fyi, the <i class="icon-mini-arrow-down"></i> is optional. It is the tiny arrow associated with toggled lists and will not be visible to app users.