The following code is for an accessible tabbed interface (see the caution below). Tabs are a nice way to display short amounts of parallel information.
Tabbed Interface Cautions
- Edit the Tab section links in the HTML editor view only! The tab sections function like links but do not edit the text using the Link Options in the RCE. If you do that, Canvas will automatically change the link code, which will "break" the page. To avoid that, simply switch to the HTML editor view and change the text there.
- Be aware that this style depends on a CSS class that Instructure no longer supports, and it will look different on a mobile device (see below for how it looks on mobile or if the class stops working).
- For those who need to print content to read offline, each tab must be printed separately.
Tabbed Interface With Example Content
<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1" style="color: #BE0000;">tab title</a></li>
<li><a href="#fragment-2" style="color: #BE0000;">tab title</a></li>
<li><a href="#fragment-3" style="color: #BE0000;">tab title</a></li>
</ul>
<div id="fragment-1" style="overflow: auto; border: 1px solid #BE0000;">
<h3 style="color: #BE0000;">Tab Heading</h3>
<p>Content</p>
</div>
<div id="fragment-2" style="overflow: auto; border: 1px solid #BE0000;">
<h3 style="color: #BE0000;">Tab Heading</h3>
<p>Content</p>
</div>
<div id="fragment-3" style="overflow: auto; border: 1px solid #BE0000;">
<h3 style="color: #BE0000;">Tab Heading</h3>
<p>Content</p>
</div>
</div>
Tabbed Interface With Example Content and Border
This code can be customized by adding a border.
<div style="margin: 1em 0%; padding: 10px 15px; border: 2px solid #BE0000; background: #ffffff; font-size: 100%; overflow: auto;">
<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1" style="color: #BE0000;">tab title</a></li>
<li><a href="#fragment-2" style="color: #BE0000;">tab title</a></li>
<li><a href="#fragment-3" style="color: #BE0000;">tab title</a></li>
</ul>
<div id="fragment-1" style="overflow: auto;">
<h3 style="color: #BE0000;">Tab Heading</h3>
<p>Content</p>
</div>
<div id="fragment-2" style="overflow: auto;">
<h3 style="color: #BE0000;">Tab Heading</h3>
<p>Content</p>
</div>
<div id="fragment-3" style="overflow: auto;">
<h3 style="color: #BE0000;">Tab Heading</h3>
<p>Content</p>
</div>
</div>
</div>
Tabbed Interface With Color Tabs and Boxes
The tabs and text areas can be coordinated using color.
<div class="tab_container enhanceable_content tabs">
<ul class="tab_links">
<li style="background-color: #BE0000;"><span style="color: #ffffff; font-size: 18pt;"> <a style="color: #ffffff; font-style: normal;" href="#tab_1">Tab section title</a> </span></li>
<li style="background-color: #708E99;"><span style="color: #ffffff; font-size: 18pt;"> <a style="color: #ffffff; font-style: normal;" href="#tab_2">Tab section title</a> </span></li>
<li style="background-color: #890000;"><span style="color: #ffffff; font-size: 18pt;"> <a style="color: #ffffff; font-style: normal;" href="#tab_3">Tab section title</a> </span></li>
</ul>
<div id="tab_1">
<div style="margin: 5px 1%;overflow: auto:">
<div class="content-box pad-box-mini border border-trbl border-round" style="padding: 1%; background-color: #E2E6E6; border: 3px solid #BE0000;">
<h3>Tab Heading</h3>
<p>Content</p>
<div style="text-align: right;"><a href="#top">return to top of page</a></div>
</div>
</div>
</div>
<div id="tab_2">
<div style="margin: 5px 1% 5px 1%;overflow: auto:">
<div class="content-box pad-box-mini border border-trbl border-round" style="padding: 1%; background-color: #E2E6E6; border: 3px solid #708E99;">
<h3>Tab Heading</h3>
<p>Content</p>
<div style="text-align: right;"><a href="#top">return to top of page</a></div>
</div>
</div>
</div>
<div id="tab_3">
<div style="margin: 5px 1% 5px 1%;overflow: auto:">
<div class="content-box pad-box-mini border border-trbl border-round" style="padding: 1%; background-color: #E2E6E6; border: 3px solid #890000;">
<h3>Tab Heading</h3>
<p>Content</p>
<div style="text-align: right;"><a href="#top">return to top of page</a></div>
</div>
</div>
</div>
</div>
Tabbed Interface With Color Box, Tabs, and Boxes
You can also use a color box with this style for further customization.
<div style="margin: 5px 1% 5px 1%; background-color: #E2E6E6; width: 90%;">
<div class="content-box pad-box-mini border border-trbl border-round" style="background-color: #E2E6E6; border: solid #BE0000;">
<h2 style="background-color: #E2E6E6; color: #BE0000; font-style: normal;"><strong> </strong>Title Text Here</h2>
<div class="tab_container enhanceable_content tabs">
<ul class="tab_links">
<li style="background-color: #BE0000;"><span style="color: #ffffff; font-size: 18pt;"> <a style="color: #ffffff; font-style: normal;" href="#tab_1">Tab section title</a> </span></li>
<li style="background-color: #708E99;"><span style="color: #ffffff; font-size: 18pt;"> <a style="color: #ffffff; font-style: normal;" href="#tab_2">Tab section title</a> </span></li>
<li style="background-color: #890000;"><span style="color: #ffffff; font-size: 18pt;"> <a style="color: #ffffff; font-style: normal;" href="#tab_3">Tab section title</a> </span></li>
</ul>
<div id="tab_1">
<div style="margin: 5px 1%;">
<div class="content-box pad-box-mini border border-trbl border-round" style="padding: 1%; background-color: #E2E6E6; border: 3px solid #BE0000;">
<h3>Content Heading</h3>
<p>Content</p>
<div style="text-align: right;"><a href="#top">return to top of page</a></div>
</div>
</div>
</div>
<div id="tab_2">
<div style="margin: 5px 1% 5px 1%;">
<div class="content-box pad-box-mini border border-trbl border-round" style="padding: 1%; background-color: #E2E6E6; border: 3px solid #708E99;">
<h3>Content Headings</h3>
<p>Content</p>
<div style="text-align: right;"><a href="#top">return to top of page</a></div>
</div>
</div>
</div>
<div id="tab_3">
<div style="margin: 5px 1% 5px 1%;">
<div class="content-box pad-box-mini border border-trbl border-round" style="padding: 1%; background-color: #E2E6E6; border: 3px solid #890000;">
<h3>Content Heading</h3>
<p>Content</p>
<div style="text-align: right;"><a href="#top">return to top of page</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
Note: Use descriptive titles for each tab. These will need to be edited in the HTML editor view, NOT by using Link Options in the RCE. See caution note below. Use headings within the content tabs if appropriate. The content can be whatever you want, but this style is not recommended for use with multimedia elements. It is for structuring parallel sections of text.
Modifications and Guidelines
- The content can be whatever you want, but this style is not recommended for use with multimedia elements. It is for structuring parallel sections of text.
- If you change the colors, you will need to test for color contrast. The tab headings in our examples have been changed to white font and sized at 18pt to meet color contrast standards.
- We added same-page links to aid navigation on mobile devices. Those allow someone to easily return to the tab links at the top. You can remove them if each section is short.
- You can create as many sections as you need by adding or removing a section.
Best Practice: Use descriptive section text and headings
At the top of each section use meaningful tab section titles and headings in each tab section to ensure that the content reads well on a mobile device and for those using screen readers.
Section Text and Headings
At the top of each section use meaningful tab section titles and headings in each tab section to ensure that the content reads well on a mobile device and for those using screen readers.
How the Tabs Look on a Mobile Device
If the CSS class stops working or you are viewing the content on a mobile device, it will display like this:
0 Comments
Add your comment