Is it possible to create javascript enabled page design within Canvas?

[Amanda_L_Albrig]

I'd love to be able to use javascript to create collapsible content areas and other interactions within Canvas pages. Unfortunately, it seems that Canvas has limited the code types that can be used directly within a course page. Is it possible to create collapsible content areas and other interactions using javascript or do I still need to build my content outside of Canvas and link to it?

[bbelew]

If you can get some CSS added to your branding CSS file you could do simple collapsible lists with just html.

Pure CSS collapsible tree menu | The CSS Ninja - Web tech, front-end performance & silly ideas

If Instructure would allow TinyMCE to use and not strip the <details> and <summary> tags you could use them to do simple show/hides too.  Though they would only work with modern browsers supporting HTML5

The details and summary elements | HTML5 Doctor

[Amanda_L_Albrig · Accepted solution]

Thanks Brandon. Not sure about being able to add the CSS to the branding file. I like the idea of Canvas allowing TinyMCE as well as the <details> and <summary> tags.

[awilliams]

While it's not possible to do this natively, there is a way! Check out my comment on this topic about embedding stuff from Google Drive into a Canvas page. HTML files with CSS and/or JS are possible.

[10650941 · Accepted solution]

We have had some success with the dialog, accordion and tabs code found here: Canvas html code

It's not much, but it is something.

[James_Kocher_UF · Accepted solution]

have you tried the style guides?

You can usually find them at http://canvas.instructure.com/styleguide   There are things you can do that will allow collapsible content windows

[Amanda_L_Albrig]

That's awesome, James. Thank you. I'll give that a try.

[Amanda_L_Albrig]

James,

Does the code snipped at the bottom of the html code in the styleguide need to go into the branding CSS page or is it default code already in the Canvas CSS?

If it is not already default code is it possible to add it instead of having everyone request CSS updates from their system admins?

Thanks,

Amanda

[James_Kocher_UF]

That can go straight in your wiki pages in the HTML editor!

[bbelew]

How are you putting the jquery into the html editor?  It strips <script> tags out?