[ARCHIVED] Tabs

Jump to solution
brad_hinson
Community Novice

We are developing bilingual courses and programs at my institution and have a need for tabbed content (English | Spanish) so our students can compare/contrast content side by side.  Our institution does not have javascript enabled for non-admins and the editor strips out all the goodies (CSS, javascript, etc).  I'm a power-user, but not an admin.   Given this context - can I create jquery-esque tabs in Canvas pages?  Is there a workaround that anyone knows of... ?

I see many have successfully done some nice nice UI as admins with Canvas universally enabled, but what if the bells and whistles are not enabled?  Ideas, tips, tricks welcome...

Brad

Labels (1)
1 Solution
awebster
Community Contributor

Maybe this is what you are looking for??

Here is some HTML code that would allow you to do the tabs in the individual pages. You have to have a decent (more than beginner, but not totally advanced) knowledge of HTML to work with this code though because I've found editing it in the page view doesn't work quite so well. If you edit the content in the HTML view within the opening and closing tags then it works pretty slick.

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

View solution in original post