Going back to 2020, when I did more elearning hero challenges without using Articulate products (the InArticulate eLearning Hero series), I touched on some examples of using tabs in elearning:
I have a current use case where I need to show users some of the same information on a page, but then tailor some of the content based on the role of the user. Now, I could do this as separate pages in the LMS (e.g. using restrictions) but I’d have to create groups without a nice way of being able to do that for this specific use case. Alternatively I could build the whole course in Storyline and use variables (I’ve designed another program that used this approach to provide case examples based on user self selected demographics). But the whole point of the InArticulate eLearning Hero is to not use Articulate products (plus building in storyline takes forever and has other limitations).
Sitting with the problem for a bit I considered I could use tabs to hide irrelevant content and let users self-select, removing the issue of trying to get automated groups and restictions going. This also let me keep all of the related content on a single page.
Why Use Tabs?
Tabs are useful for showing role-based content because they let users easily switch between sections without reloading the page. According to the Nielsen Norman Group, tabs work well when:
- The content is related but needs to be separated for clarity (e.g., different user roles).
- Users can compare sections easily by switching between tabs (not as useful in this specific case).
- All tabs are visible and clearly labeled, so users know what’s available (this allows for easy self-identification and selection).
Another design pattern that might achieve this is accordions. While accordions allow you to expand and collapse content, accordions require more scrolling and usually suit long, detailed content that users review one section at a time. Tabs work best when content is short and needs to be accessed without much vertical movement. For role-based content, tabs allow users to see all available roles at a glance and move between them without losing context.
In this example, tabs help users focus on content that applies to their role without being overwhelmed by irrelevant information.
Option 1: H5P
In trying to work through a solution I found Oliver Tacke’s old post with a custom H5P content type, Tabs. I had forgotten I’d come across this before until I went to my H5P hub and types tabs and saw I already had the libraries. What’s great about Oliver’s product is that it’s pretty flexible to screen size, but more importantly, it offers way more than H5P accordions interms of what you can do with the content. He included the column content type as a sub type of the tabs object. This means you can place other H5P content types in each tab, while H5P accordions can only handle text. So I build out a sample.
The issue with this approach was when I went to the LMS, guess who didn’t have permissions to add new H5P libraries? This guy. So I had to come up with an alternative.
Option 2: Good Old Fashioned HTML (and Bootstrap)
Most LMSs used in higher ed, like Canvas and Moodle, allow you to leverage Bootstrap when creating page content. So for this use case I could take all that same content and build out the tabs. This is the pattern “pill navigation”. It hides content that is not associated with the selected nav item, and highlights whichever tab you’ve chosen. It’s responsive so if you squish your browser or view it on a phone you don’t get any weird scrolling.
If you want to try it yourself in your own LMS, you can use the code below.
<!-- Pill navigation with full-width tabs -->
<ul style="padding: 5px;" class="nav nav-pills nav-fill justify-content-center" role="list">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1" tabindex="0">Group A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2" tabindex="-1">Group B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab3" tabindex="-1">Group C</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab4" tabindex="-1">Group D</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab5" tabindex="-1">Group E</a>
</li>
</ul>
<!-- Tab content -->
<div style="padding-top: 10px" class="tab-content">
<div id="tab1" class="tab-pane fade active show">
<div class="cta-light">
<div class="text-dark bg-light border rounded border-0 border-light d-flex flex-column flex-lg-row justify-content-between align-items-stretch my-1 py-4 p-md-5">
<div class="d-flex flex-column justify-content-between pb-lg-3 pr-lg-2" style="flex: 1;">
<h4 class="fw-bold mb-2">Online Safety Training</h4>
<p class="mb-0">Learn how to avoid common online risks, keep personal information secure, and spot suspicious messages. The course includes short videos, readings, and quick quizzes. It takes about 40 minutes to finish and helps create a safer space for everyone.</p>
</div>
<div class="d-flex align-items-center pl-lg-2" style="flex: 0 0 auto;">
<a class="btn btn-primary fs-5 py-2 px-4" style="min-width: 150px;" role="button" href="#">Start Training</a>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane fade">
<div class="cta-light">
<div class="text-dark bg-light border rounded border-0 border-light d-flex flex-column flex-lg-row justify-content-between align-items-stretch my-1 py-4 p-md-5">
<div class="d-flex flex-column justify-content-between pb-lg-3 pr-lg-2" style="flex: 1;">
<h4 class="fw-bold mb-2">Protecting Your Info Online</h4>
<p class="mb-0">This short course walks you through ways to stay secure on the internet, covering passwords, email tips, updates, and privacy basics. You can complete it in under an hour and it’s useful for anyone working with sensitive data.</p>
</div>
<div class="d-flex align-items-center pl-lg-2" style="flex: 0 0 auto;">
<a class="btn btn-primary fs-5 py-2 px-4" style="min-width: 150px;" role="button" href="#">Get Started</a>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab-pane fade">
<div class="cta-light">
<div class="text-dark bg-light border rounded border-0 border-light d-flex flex-column flex-lg-row justify-content-between align-items-stretch my-1 py-4 p-md-5">
<div class="d-flex flex-column justify-content-between pb-lg-3 pr-lg-2" style="flex: 1;">
<h4 class="fw-bold mb-2">Staying Safe with Tech</h4>
<p class="mb-0">Basic training to help you use digital tools more safely. The course covers common threats and how to avoid them. Finish it in about 40 minutes. It’s a good step to protect your work and those around you.</p>
</div>
<div class="d-flex align-items-center pl-lg-2" style="flex: 0 0 auto;">
<a class="btn btn-primary fs-5 py-2 px-4" style="min-width: 150px;" role="button" href="#">Begin Course</a>
</div>
</div>
</div>
</div>
<div id="tab4" class="tab-pane fade">
<div class="cta-light">
<div class="text-dark bg-light border rounded border-0 border-light d-flex flex-column flex-lg-row justify-content-between align-items-stretch my-1 py-4 p-md-5">
<div class="d-flex flex-column justify-content-between pb-lg-3 pr-lg-2" style="flex: 1;">
<h4 class="fw-bold mb-2">Digital Risk Awareness</h4>
<p class="mb-0">An overview of common digital risks and simple ways to avoid them. Learn through video, text, and short quizzes. Completion time is around 40 minutes. Helps promote safer practices in day-to-day work.</p>
</div>
<div class="d-flex align-items-center pl-lg-2" style="flex: 0 0 auto;">
<a class="btn btn-primary fs-5 py-2 px-4" style="min-width: 150px;" role="button" href="#">Launch Module</a>
</div>
</div>
</div>
</div>
<div id="tab5" class="tab-pane fade">
<div class="cta-light">
<div class="text-dark bg-light border rounded border-0 border-light d-flex flex-column flex-lg-row justify-content-between align-items-stretch my-1 py-4 p-md-5">
<div class="d-flex flex-column justify-content-between pb-lg-3 pr-lg-2" style="flex: 1;">
<h4 class="fw-bold mb-2">Basic Online Safety (Optional)</h4>
<p class="mb-0">A short, optional course for casual team members. It covers safe habits online, spotting threats, and managing personal data. All content is easy to follow, and the full session can be completed in under an hour.</p>
</div>
<div class="d-flex align-items-center pl-lg-2" style="flex: 0 0 auto;">
<a class="btn btn-primary fs-5 py-2 px-4" style="min-width: 150px;" role="button" href="#">View Training</a>
</div>
</div>
</div>
</div>
</div>
Image by OpenClipart-Vectors from Pixabay