tabs in pages

[RuthHeath]

how do I add tabs to pages in canvas??

[nwilson7]

@RuthHeath Welcome to the Canvas Community!  There is not a way in the Rich Content Editor to add tabs, it all has to be done through the HTML view using the < /> button in the bottom right.  I don't believe enhanceable elements are officially supported by Canvas anymore but the tabs one still works.  Here is the code:

<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>

Once you paste the above code in, you can switch back to the regular editor and add content, just be careful.

Hope this helps!

-Nick

[Chris_Hofer · Accepted solution]

Hi there, @RuthHeath ...

You'll probably want to take a look at this topic...which addresses some of the same things you want to know about adding tabbed content to a page in your coures:

Solved: Formatting tabs in Canvas page - Instructure Community (canvaslms.com)

I'll provided the code so it's better formatted:

<div class="enhanceable_content tabs">
	<ul style="background-color: #dcfa70;">
		<li><a href="#fragment-1">Tab One</a></li>
		<li><a href="#fragment-2">Tab Two</a></li>
		<li><a href="#fragment-3">Tab Three</a></li>
	</ul>
	<div id="fragment-1">Tab 1 content</div>
	<div id="fragment-2">Tab 2 content</div>
	<div id="fragment-3">Tab 3 content</div>
</div>

But keep in mind the comments from me and James in the post that I linked to above...as this code may not work in the future.

Hope this helps!

[RuthHeath]

Thank you. I'm new to hybrid, and to canvas, so this soounds too complicated and I'll stick to just having many pages!  

[katrina_raciak]

Here's the code for some nice looking tabs that is easy to customize (see attached)