cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Member

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

Tags (3)
39 Replies
Highlighted
Surveyor

I am super excited about this awebster​!  You have totally made this nerd's day!

Highlighted

Ya, the DIV tag is defined somewhere in the Canvas CSS (I don't have a full understanding of how that all works but I'm going to have my admin give me a lesson). I just know the code works! Smiley Happy

Highlighted

Thanks for this code - it worked great!

I've found it's pretty easy to design each of my "tabs" as separate content pages, then when I'm done just grab the HTML and paste it into this template. Thanks again!

Highlighted

Hey Amanda - that did the trick!  I've been tinkering with a pure css approach but couldn't get anything that wasn't 'cleansed' by the page editor.  So I thought I would somehow leverage the Canvas css, but no luck so far.   Looks like that's what this does - is that right?

thanks so much!

Brad

Highlighted
Community Member

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

Highlighted

I've been combing the apps looking for an angle, but no luck so far.  Any idea which app? It may not be enabled in our instance... 

Highlighted
Community Coach
Community Coach

There's ​also an LTI tool that allows people to add their own tabs and name them anything they want! I'm pretty sure teachers can do it themselves for their courses.

Highlighted

Thanks Chris...    Yes, the tabs from the style guide would be perfect.  I've successfully gotten them to render via CSS in the page editor, but they don't work as the javascript is stripped out of the page editor.    I am appealing to my Canvas admins, but they have traditionally not been very open to mods.  Their first response wasn't very hopeful, but I'm still asking.  It's a reasonable, pedagogical, need but I'm not very optimistic. 

So my challenge is how to do this without the mod.  Hmmmm.  

Highlighted
Community Coach
Community Coach

Hi brad.hinson@ucdenver.edu​...

You might want to talk with one of your admins to see if the global CSS or JavaScript could be tweaked.  If you take a look at this (replacing "YourSchoolName" with your own Canvas URL):

https://YourSchoolName.instructure.com/styleguide#tab_navigation

You might be able to use tabs in this way.  Would that work for you?