📜 The Layered Scroll

Your hands brush against an ancient scroll in the Islands of Innovation - but this is no ordinary parchment. As you unroll it, sections magically reorganize themselves based on where your fingers linger, revealing knowledge in perfect sequence.

This is the power of tabbed content:

🗂️ Organize complex topics into digestible layers
⏳ Control pace by revealing content progressively
🎭 Reduce clutter while maintaining depth

"Like an archaeological dig, the richest finds are often beneath the surface."

Your Scrollcraft Mission

✂️ Task: Weave AI-Generated Tabbed Content

Structure with AI: Use prompts like:
"Divide [topic] into 4 tabbed sections for Canvas LMS: Overview, Key Theories, Case Studies, and FAQs. Use #1a6a8b as the primary color."
Implement the HTML below (or let AI generate it)
Test the layers: Ensure tabs work on mobile and desktop

How to Edit Tabbed Content: Copy and paste HTML into the HTML editor. To edit, go to Rich Text Editor view where you will see all content listed rather than tabbed. You'll see the tab headers and then each block of content going down the page. The safest way of editing is to replace existing content in each section with new content. If in doubt about where one section ends and the other begins, place new content within the old content and then carefully delete old content.

Tab 1
Tab 2
Tab 3

Tab 1 Title

Tab 1 Content

Tab 2 Title

Tab 2 Content

Tab 2 Title

Tab 3 Content

</> HTML code for the tabbed box above

<div class="enhanceable_content tabs">
<ul>
<li>
<h4><span style="background-color: #ecf0f1;"><a style="background-color: #ecf0f1;" href="#tab-1">Tab 1</a></span></h4>
</li>
<li>
<h4><span style="background-color: #ecf0f1;"><a style="background-color: #ecf0f1;" href="#tab-2">Tab 2</a></span></h4>
</li>
<li>
<h4><span style="background-color: #ecf0f1;"><a style="background-color: #ecf0f1;" href="#tab-3">Tab 3</a></span></h4>
</li>
</ul>
<div id="tab-1">
<h3>Tab 1 Title</h3>
<p><span style="color: var(--ic-brand-font-color-dark); font-family: inherit; font-size: 1rem;">Tab 1 Content</span></p>
<p style="text-align: center;"> </p>
<p> </p>
</div>
<div id="tab-2">
<h3>Tab 2 Title</h3>
<p>Tab 2 Content</p>
<p> </p>
</div>
<div id="tab-3">
<h3>Tab 2 Title</h3>
<p>Tab 3 Content</p>
<p> </p>
</div>
</div>

Tab 1
Tab 2
Tab 3

Tab 1 Title

Tab 1 Content

Tab 2 Title

Tab 2 Content

Tab 2 Title

Tab 3 Content

</> HTML code for the tabbed box above

<div class="enhanceable_content tabs">
<ul>
<li>
<h4><span style="background-color: #5f6b7f;"> <a style="background-color: #5f6b7f; color: #dcdcdc; text-decoration: none;" href="#tab-1">Tab 1</a> </span></h4>
</li>
<li>
<h4><span style="background-color: #5f6b7f;"> <a style="background-color: #5f6b7f; color: #dcdcdc; text-decoration: none;" href="#tab-2">Tab 2</a> </span></h4>
</li>
<li>
<h4><span style="background-color: #5f6b7f;"> <a style="background-color: #5f6b7f; color: #dcdcdc; text-decoration: none;" href="#tab-3">Tab 3</a> </span></h4>
</li>
</ul>
<div id="tab-1" style="background-color: #ecf0f1; padding: 15px; border-radius: 5px;">
<h3>Tab 1 Title</h3>
<p><span style="color: var(--ic-brand-font-color-dark); font-family: inherit; font-size: 1rem;">Tab 1 Content</span></p>
<p> </p>
</div>
<div id="tab-2" style="background-color: #ecf0f1; padding: 15px; border-radius: 5px;">
<h3>Tab 2 Title</h3>
<p>Tab 2 Content</p>
<p> </p>
</div>
<div id="tab-3" style="background-color: #ecf0f1; padding: 15px; border-radius: 5px;">
<h3>Tab 2 Title</h3>
<p>Tab 3 Content</p>
<p> </p>
</div>
</div>

Welcome
Learning Outcomes
Teaching Team
Module Reading
Module Expectations

Welcome blurb here

Module Learning Outcomes

1. one

2. two

Meet the teaching team:

team here

Essential Reading

Recommended Reading

Theory lessons

Expectations of students for theory sessions:

Complete all required content detailed in the weekly breakdown during a reasonable timeframe (and before relevant practical sessions)
Engage with peers via the Microsoft Teams channel for this module
Undertake additional reading as you feel fit. Remember lecturers will provide guided learning but you are responsible for recognising gaps in your own knowledge

Expectations of staff for theory sessions:

Upload material by the advertised time of the session shown on timetable
Provide students with a range of learning materials
Facilitate discussion via the Microsoft Teams channel for the practical session. Staff may check and if you have not completed the pre reading, you could be asked to leave on safety grounds as you need this underpinning prior to learning the techniques

</> HTML code for the tabbed box above

<p> </p>
<div class="enhanceable_content tabs">
<ul>
<li><span style="font-family: helvetica;"> <a style="background-color: #003d50; text-decoration: none; color: white;" href="#tab-1">Welcome</a> </span></li>
<li><span style="font-family: helvetica;"> <a style="background-color: #8b3556; text-decoration: none; color: white;" href="#tab-2">Learning Outcomes</a> </span></li>
<li><span style="font-family: helvetica;"> <a style="background-color: #3ea3cb; text-decoration: none; color: white;" href="#tab-3">Teaching Team</a> </span></li>
<li><span style="font-family: helvetica;"> <a style="background-color: #95c11f; text-decoration: none; color: white;" href="#tab-4">Module Reading</a> </span></li>
<li><span style="font-family: helvetica;"> <a style="background-color: #008588; text-decoration: none; color: white;" href="#tab-5">Module Expectations</a> </span></li>
</ul>
<div id="tab-1">
<p>Welcome blurb here</p>
<p style="text-align: center;"> </p>
<p> </p>
</div>
<div id="tab-2">
<h3>Module Learning Outcomes</h3>
<p>1. one</p>
<p>2. two</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="tab-3">
<h2>Meet the teaching team:</h2>
<p>team here</p>
<p> </p>
<p style="text-align: center;"> </p>
<p style="text-align: center;">   </p>
</div>
<div id="tab-4">
<p><strong>Essential Reading</strong></p>
<p> </p>
<p><strong>Recommended Reading</strong></p>
<br />
<p> </p>
<p> </p>
</div>
<div id="tab-5">
<p> </p>
<p><strong>Theory lessons</strong> </p>
<div>Expectations of students for theory sessions:</div>
<div>
<ul>
<li>Complete all required content detailed in the weekly breakdown during a reasonable timeframe (and before relevant practical sessions)</li>
<li>Engage with peers via the Microsoft Teams channel for this module</li>
<li>Undertake additional reading as you feel fit. Remember lecturers will provide guided learning but you are responsible for recognising gaps in your own knowledge</li>
</ul>
</div>
<div>
<div>Expectations of staff for theory sessions:</div>
<div>
<ul>
<li>Upload material by the advertised time of the session shown on timetable</li>
<li>Provide students with a range of learning materials</li>
<li>Facilitate discussion via the Microsoft Teams channel for the practical session. Staff may check and if you have not completed the pre reading, you could be asked to leave on safety grounds as you need this underpinning prior to learning the techniques</li>
</ul>
</div>
</div>
<p> </p>
</div>
</div>

It's not essential to watch this video but if you want to progress your ability to edit and create new tabbed style elements you might learn more by watching it

Note: The "enhanceable content" tag appears to have a limited life. Support would help us identify a more sustainable future for this essential feature. How can we add CSS to the back-end to sustain a form of HTML that will provide tabs? [BJ - Feb 2025] - e.g. https://community.canvaslms.com/t5/Canvas-Developers-Group/HTML-to-Create-Tabs-That-Work-for-Keyboard-Navigation/m-p/618623/highlight/true#M11220

📖 Move on to the NEXT CHAPTER of this adventure