Assistance with Code

[ChristinaMoren1]

I am attempting to use code to have a screen has toggleable tabs.

Here is the script from W3 schools, where the preview works perfectly. When I add the script to my Canvas page, it strips out the table format and just lists the tabs and linked content.

Does anyone have suggestions?

Here is the document with the script and the screenshots: https://docs.google.com/document/d/1bMJZtTamSo8ZAR-TRQjbdyrvjiYNcl1xdK9aySqZaLI/edit?usp=sharing

[Gabriel33 · Accepted solution]

Canvas strips out custom CSS, which your code uses, and your tabs depend on. If you are an admin, you can add the CSS to the Canvas account: How do I upload custom JavaScript and CSS files to... - Instructure Community - 253 .

Without that permission, what usually works to make tabs within Canvas is the following:

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

But note that Instructure has suggested that the enhanceable_content class will be deprecated at some point, and indeed some parts of the website already don't seem to allow it (such as New Quizzes).

What you can use that provides similar functionality is HTML details/summary tags: HTML summary Tag

[Gabriel33 · Accepted solution]

Canvas strips out custom CSS, which your code uses, and your tabs depend on. If you are an admin, you can add the CSS to the Canvas account: How do I upload custom JavaScript and CSS files to... - Instructure Community - 253 .

Without that permission, what usually works to make tabs within Canvas is the following:

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

But note that Instructure has suggested that the enhanceable_content class will be deprecated at some point, and indeed some parts of the website already don't seem to allow it (such as New Quizzes).

What you can use that provides similar functionality is HTML details/summary tags: HTML summary Tag

[dbrace · Accepted solution]

Hi @ChristinaMoren1,

I will echo what @Gabriel33 said. Also, even when not related to using CSS, Canvas (for a variety of reasons) does not support all HTML code. There is an allowlist at  Canvas HTML Editor Allowlist - Instructure Community - 387066 .

For general assistance with HTML code related to tabs, I would recommend checking out Creating customized tabs in Canvas — How to Canvas by @DrNufer.

-Doug

[Kasparbredahl]

Hi 

I have done a solution for tabs using custom javascript and css so if you have access to install that you can use it:

Google doc with code 

Also note that the canvas tabs are not an ideal solution as they ain´t mobile friendly.

[dbrace]

Hi @Kasparbredahl,

Thank you for your willingness to share an share. The example that you provided is requiring people to request access. Is that your intent or do you want the Google Doc to be public?

-Doug