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

Using Code from the Style Guide

I would like to use the Accordion code on a page in a course. 


I've copied the code from the first box and pasted it into the page using the HTML Editor.


There's a second box with some code that I then pasted below that because I wasn't sure what to do with it.

2nd code.png

Obviously I'm an amateur and doing something wrong :smileyconfused: because I'm not getting the accordion. Any help is greatly appreciated.


39 Replies
Community Member

I would also be interested in knowing how you got the styling to work. Another problem with the accordion I have found is that they all accordions in a set open to the same size regardless of the size of the content they hold. Have you worked around that?

Community Coach
Community Coach

Janetta & Matthew

Some of the content in the style Guide will only work on a content page if the Global CSS file is updated with the code snippet in the second box, and then only if that snippet is sequenced in the right location in the global files, and often with more code used to make it load in the correct order.

Matthew: you seem to know the global script well enough to play in there.

Janetta: Several of us have been sharing some HTML content hacks in this group that will work without updating the global script. Check key-word "Code-Snippets" to find these. Also, Scott Dennis has created a public classroom where some of us will be providing much more of these types of enhancements - Coming soon!


Community Member


Code snippets are in my comfort zone. I get a kick out making those HTML content hacks. I look forward to checking out the course from Scott Dennis!

Thank you,


If you take a look at my code snippet above where I initialize the accordions in the javascript, you will see on line 5 that I set the heightstyle to "content" which makes each accordion the size of the content contained in that accordion.

Just for the record, I had almost zero javascript experience before we got Canvas a couple of months ago and I have literally pieced this entire thing together based on google searches. Use at your own risk!

I'll try to put together a public Canvas page that I can use to go into further detail on how I got things to look the way they do. It'll help everyone see it in action as well.

I created this page that has a link to a jsfiddle that contains all the relevant code. Hope that helps!

Modifying CSS and Javascript

I hope you like it!

It's brother (that I uploaded from) is being built to train adventurous faculty who also are not coders (also, as in neither am I), so the structure of the lesson pages might seem a bit pedestrian for those of you who code.

Now that its up for all those fancy Instructional Designer Group members, I suspect I'll start seeing that tone change a bit - but I hopenot too much, I still have so much to learn.

I am getting ready to start playing in our Global Script, but only on our test instance so I don't muck things up too badly - I tend to be much braver than I am smart:-}

Since the test environment gets overwritten every three weeks (and I'm too lazy to check the calendar to see when the next refresh is), I just created a separate sub-account in our production environment for testing these changes. Each sub-account can have it's own CSS and JS files if that feature is enabled at the higher level account.


This is such a great line of questions and dialogue!

What I was looking for was something similar to the way bootstrap has been implemented in places like Wordpress environments.  These things should just be whitelisted globally!

See this example:

When I was previously at UConn, they had their own WP instance called aurora where all of these features were baked in as a plugin(s) and themes. Home | Aurora

Community Member

Maybe this would help?

Here's some code you can use on the page itself (without doing anything to the global javascript) with the HTML editor. Note: There is an issue with the sizing of accordion tabs using this code. The sizing of each content tab will default to the largest content tab. If anyone has a fix to this I would love to see it! See picture below code.


<div class="enhanceable_content accordion">
<h3><a href="#">TYPE TITLE TO FIRST ACCORDION TAB</a></h3>
<h3><a href="#">TYPE TITLE TO SECOND ACCORDION TAB</a></h3>
<h3><a href="#">TYPE TITLE FOR THIRD ACCORDION TAB</a></h3>

Sizing Example:

Accordion Sizing 1.png

Accordion sizing 2.png