Att använda flikar på en Canvas-sida förbättrar överskådligheten och organiseringen av kursmaterialet, vilket gör det enklare för studenter att hitta och fokusera på olika delar.
Så här ser Canvas eget fliksystem ut. Det används på andra ställen som i inställningarna för en kurs. Men visste du att du kan använda dessa även på en egen Canvas-sida? Det du behöver göra är att kopiera koden nedan med den svarta knappen. Därefter går du till en sida och redigerar. Klicka på det lilla molnet för att bädda in och klistra in koden där. Observera att flikarna inte har någon funktion förrän du sparar sidan.
Canvas flikar

<p><em>Ovanför flikarna.</em></p>
<div class="enhanceable_content tabs">
<ul>
<li><a href="#flik1">Flik 1</a></li>
<li><a href="#flik2">Flik 2</a></li>
<li><a href="#flik3">Flik 3</a></li>
<li><a href="#flik4">Flik 4</a></li>
<li><a href="#flik5">Flik 5</a></li>
<li><a href="#flik6">Flik 6</a></li>
<li><a href="#flik7">Flik 7</a></li>
</ul>
<div id="flik1">
<p>Innehåll i flik 1.</p>
</div>
<div id="flik2">
<p>Innehåll i flik 2.</p>
</div>
<div id="flik3">
<p>Innehåll i flik 3.</p>
</div>
<div id="flik4">
<p>Innehåll i flik 4.</p>
</div>
<div id="flik5">
<p>Innehåll i flik 5.</p>
</div>
<div id="flik6">
<p>Innehåll i flik 6.</p>
</div>
<div id="flik7">
<p>Innehåll i flik 7.</p>
</div>
</div>
<p><em>Nedanför flikarna.</em></p>
Bonus: en något mer färgglad variant

<p><em>Ovanför flikarna.</em></p>
<div class="enhanceable_content tabs">
<ul>
<li><a href="#flik1" style="border: 1px solid #E81416; border-bottom: none; text-decoration: none;">Flik 1</a></li>
<li><a href="#flik2" style="border: 1px solid #FFA500; border-bottom: none; text-decoration: none;">Flik 2</a></li>
<li><a href="#flik3" style="border: 1px solid #FAEB36; border-bottom: none; text-decoration: none;">Flik 3</a></li>
<li><a href="#flik4" style="border: 1px solid #79C314; border-bottom: none; text-decoration: none;">Flik 4</a></li>
<li><a href="#flik5" style="border: 1px solid #487DE7; border-bottom: none; text-decoration: none;">Flik 5</a></li>
<li><a href="#flik6" style="border: 1px solid #4B369D; border-bottom: none; text-decoration: none;">Flik 6</a></li>
<li><a href="#flik7" style="border: 1px solid #70369D; border-bottom: none; text-decoration: none;">Flik 7</a></li>
</ul>
<div id="flik1" style="border: 1px solid #E81416; margin-top: -1px;">
<p>Innehåll i flik 1.</p>
</div>
<div id="flik2" style="border: 1px solid #FFA500; margin-top: -1px;">
<p>Innehåll i flik 2.</p>
</div>
<div id="flik3" style="border: 1px solid #FAEB36; margin-top: -1px;">
<p>Innehåll i flik 3.</p>
</div>
<div id="flik4" style="border: 1px solid #79C314; margin-top: -1px;">
<p>Innehåll i flik 4.</p>
</div>
<div id="flik5" style="border: 1px solid #487DE7; margin-top: -1px;">
<p>Innehåll i flik 5.</p>
</div>
<div id="flik6" style="border: 1px solid #4B369D; margin-top: -1px;">
<p>Innehåll i flik 6.</p>
</div>
<div id="flik7" style="border: 1px solid #70369D; margin-top: -1px;">
<p>Innehåll i flik 7.</p>
</div>
</div>
<p><em>Nedanför flikarna.</em></p>