Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Contributor

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

Jump to solution

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?

37 Replies
Community Contributor

That's really cool thanks  @jperkins ​ !

Community Participant

Thanks for the additional info and link.  I just got around to trying your kennethware/CIDI tools.  Very nice and easy!

Community Participant

Thanks, Jeremy, for that simpler technique.  I find that it works, although when I hide content using the 'style="display: none;"' suggestion, I seem to have to click on "Toggler" twice to make the initially hidden content appear. 

Also, as a side note, the 'class="content-box"' setting seems to cause the ul styling to change (no bullet points, no indentation). Using 'class="content-box"' doesn't seem necessary, however.

Good to know Brian. I generally use a <div> instead of <ul> so I was unaware of the fact that class="content-box" strips that out. But with the class="content-box" I did get around the having to click twice problem. Also I generally use an <a> tag instead of an <i> tag so I can use one of the icons from the styleguide.

d18089h -> You have to make sure you also change aria-expanded="true" to be "false".

Community Participant

Yes I am finding that alot of the code on the doesn't work either. Also the basic accordion code works unless you have uneven amounts of content in each accordion.


Community Contributor

I know this is an old thread, but I found it when searching, and thanks to  @jperkins  and many others, I put together the following if it helps anyone.

<a class="element_toggler btn btn-primary" style="width: 300px; text-align: left;" aria-controls="demo"><i class="icon-mini-arrow-down"></i>Collapsible</a>

<div id="demo" style="display: none;">Lorem ipsum dolor text....</div>

It shows a button used to collapse text. The two pictures below show the before and after:



Q: "How typical it is of a user to find non-designed uses for an item?"  

A: Fairly common.  It's how innovation occurs.