Assistance with Code

Question

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 Answer

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:

* PUT TITLE FOR TAB HERE * PUT TITLE FOR TAB HERE * PUT TITLE FOR TAB HERE

PUT THE CONTENT FOR THE FIRST TAB HERE

PUT THE CONTENT FOR THE SECOND TAB HERE.

PUT THE CONTENT FOR THE THIRD TAB HERE

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 Answer

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