The Instructure Community will enter a read-only state on November 22, 2025 as we prepare to migrate to our new Community platform in early December. Read our blog post for more info about this change.
I have been using a version of tabs for pages that work only for my paid teacher account, but it doesn't work for my free teacher account.
I honestly don't know what any of these means.
<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>
<hr style="border: 0; border-top: 5px double #000000;" />
<p>TEXT</p>
<hr style="border: 0; border-top: 5px double #000000;" />
<div id="kl_wrapper_3" class="kl_wrapper">
<div id="kl_panel_block_0">
<div class="kl_panels_wrapper kl_panels_tabs">
<h3 id="kl_panel_0" class="kl_panel_heading kl_panel_0">
<span style="color: #0000ff; font-size: 16pt;"><strong>TAB1</strong></span>
</h3>
<div id="kl_panel_0_content" class="kl_panel_content kl_panel_0" style="text-align: center;">
<p style="text-align: left;">TEXT</p>
</div>
<h3 id="kl_panel_1" class="kl_panel_heading kl_panel_1">
<span style="color: #0000ff; font-size: 16pt;"><strong>TAB2</strong></span>
</h3>
<div id="kl_panel_1_content" class="kl_panel_content kl_panel_1" style="text-align: center;">
<p style="text-align: left;">TEXT</p>
</div>
<h3 id="kl_panel_2" class="kl_panel_heading kl_panel_2">
<span style="color: #0000ff; font-size: 16pt;"><strong>TAB3</strong></span>
</h3>
<div id="kl_panel_2_content" class="kl_panel_content kl_panel_2" style="text-align: center;">
<p style="text-align: left;">TEXT</p>
</div>
<h3 id="kl_panel_3" class="kl_panel_heading kl_panel_3">
<span style="color: #0000ff; font-size: 16pt;"><strong>TAB4</strong></span>
</h3>
<div id="kl_panel_3_content" class="kl_panel_content kl_panel_3" style="text-align: center;">
<p style="text-align: left;">TEXT</p>
</div>
<h3 id="kl_panel_4" class="kl_panel_heading kl_panel_4">
<span style="color: #0000ff; font-size: 16pt;"><strong>TAB5</strong></span>
</h3>
<div id="kl_panel_4_content" class="kl_panel_content kl_panel_4" style="text-align: center;">
<p style="text-align: left;">TEXT</p>
</div>
<hr style="border: 0; border-top: 5px double #000000;" />
</div>
</div>
</div>
Hi @DeletedUser
I do not know, but I am just as curious as you.
I have used your first code snippet for years, and was not even aware of your second method, I just tested both methods in sandboxes from both FFT and a paid account. You are absolutely correct.
I do know that Canvas was planning to deprecate the the first method, and perhaps they already have, but only in the FFT version at this time. I really don't know!?!
Let's see if some with an actual brain, and one they are not afraid to use, comes along to explain this for us.
Kelley
Hi Kelley
I don't even remember where I got the kl_wrapper from. I'm 99% certain I googled the fragment version, and some how Canvas turned it into the kl_wrapper version without me realizing it. Thank you for confirming that I wasn't imagining this. Let's hope someone knows about this and they can share with us.
Community helpTo interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign inTo interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.