Tabs

Mar 13

Creating a tabbed interaction in Canvas is a great way for you to customize and organize your page content. You can create tabs to organize module content (e.g. overview, readings, assignments, rubrics and outcomes, additional resources, etc.), or to organize a syllabus page, or even to showcase a weekly schedule or agenda. Tabs can help you to organize your page content in a way that is streamlined and clean, effectively utilizing the available on-screen real estate while minimizing clutter.

Creating tabbed interactions does require some coding and a visit to the HTML editor, but with a little practice it will become easy to navigate the content and create good tabs. To begin, you will want to copy the following code and paste it into the HTML editor of your Canvas page:

<div class="enhanceable_content tabs">
    <ul>
        <li>
            <a href="#tab-1">First Tab </a>
        </li>
        <li>
            <a href="#tab-2">Second Tab </a>
        </li>
        <li>
            <a href="#tab-3">Third Tab </a>
        </li>
    </ul>
    <div id="tab-1">
        <p>Tab 1 content.</p>
    </div>
    <div id="tab-2">
        <p>Tab 2 content.</p>
    </div>
    <div id="tab-3">
        <p>Tab 3 content.</p>
    </div>
</div>

Let’s break down what we are looking at. The beginning of the tabbed interaction is <div class="enhanceable_content tabs">, and the end of the tabbed interaction is the last </div>. Everything between those two tags is the content.

The tabs themselves are all within the unordered list <ul> </ul>. An unordered list is a list of bullet points (or other markers), as opposed to an ordered list which would list things numerically. Each bullet point is marked as a list item <li> </li>. A typical unordered list in Canvas would look something like this:

    <ul>
        <li>First list item</li>
        <li>Second list item</li>
        <li>Third list item</li>
    </ul>

Our tabbed interaction looks very much like that list, except we are including hyperlinks for our list items (i.e. the tabs). Our first tab looks like this:

<a href="#tab-1">First Tab </a>

The <a> tag is an anchor tag, meaning when we click on the words then the user will be taken somewhere. They could be taken to a YouTube video, a website, another page in Canvas, or we could even send them to their email client and hyperlink an email address. In this case, we are taking them to a place on this Canvas page that we have called: tab-1. Now notice halfway down the code where we find this line:

These two lines of code (the <a href="#tab-1"> and the <div id="tab-1"> tags) are a call and answer. What we’re saying is that when the student clicks on the “bullet point” First Tab, they will be taken to the <div> that has the id=”tab-1”.

Note that you can customize those ids all you want. They could read:

<a href="#first-tab">First Tab </a>

or whatever you want:

<a href="#asparagus">First Tab </a>

You just need to be mindful that they need to be exact. There can’t be a single letter, dash, number, or anything out of order or else the interaction will break and the tab won’t appear.

Now let’s glance at the tab content - what appears when you click on the tab. Here is the code for the first tab:

<p>Tab 1 content.</p>

</div>

What appears is a simple paragraph with a single, three-word sentence. You can delete <p>Tab 1 content.</p> and replace it with your own content. I would strongly suggest you build out the content in another Canvas page and then copy the HTML code (all of it) from that page and paste it in between <div id="tab-1"> and </div>.

Our example has three tabs. If you only need 2 tabs then delete one <li> </li> and one <div> </div>. If you need more then copy one <li> </li> and one <div> </div> and paste them in their sections. Remember to change the href and id for the new tab.

You can put text, picture, embedded content, Studio videos, etc. in your tabs. You can also customize the tabs by adding background color, changing the font, increasing the font size, changing the font color, and adding color within the tabbed content. You can add many of these stylings using simple inline CSS. Take a look at the following code:

 <li>
    <a style="background-color: #454851; text-decoration: none; color: white;" href="#tab-1">
        <span style="font-size: 18pt; font-family: 'Architects Daughter', lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;">First Tab</span>
    </a>
</li>

Let’s walk through this code. It starts out as a list item <li>, which normally would be a bullet point but in this case it will be a tab. In order for the tab to be interactive, it need an anchor tag <a>, meaning when the student clicks on it they will be taken somewhere. The anchor has styling.

background-color: #454851

This is saying that we want the tab to be colored, and the color is #454851. You can pick whichever color you want. I suggest a fun website called https://coolors.co/ for exploring color options. Next we see:

text-decoration: none

Normally text within the <a href=”URL”> </a> tags would indicate the link by changing the font color to light blue and putting and underline under the words. I don’t want that underline, so I’m indicating that it shouldn’t have it.

color: white

This is the color of the actual font, as opposed to the background. I am saying that since the background color is a bit dark (#454851), then I want the text to be white.

href="#tab-1">

When the student clicks on the hyperlinked words, where will they be taken? I am indicating that they should be taken to an id called: tab-1.

<span style="font-size: 18pt; font-family: 'Architects Daughter', lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;">First Tab

The <span> tag is how I specify a few more formatting options. I’m indicating that I want the font size to be 18pt instead of the default 12pt. I’m also specifying the font family, which is called Architects Daughter. This can be done in the Rich Content Editor by highlighting the text and select Format >> Fonts from the menu. I recommend sticking to a sans-serif font.

Finally, you need to close out all the open tags:

</span> </a> </li>

The </li> is important because it tells the browser/Canvas “That’s the last of this bullet point”. Otherwise it might thing the rest of the page is still part of that bullet and the formatting will be off.

I do hope that the code and the video are useful. Feel free to review them a few times as you are learning, but remember that the best way to develop this skill is to put the code in a Canvas sandbox and start exploring. Adjust the styling, experiment with what kinds of content look good in the tabs, visit the Canvas Community for questions, break the code and then work to fix it again.

Happy teaching and learning

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas

Sean Nufer

Tabs

Happy teaching and learning

Embed content in Canvas

CSS width properties