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

Can I create an accordion outline in Canvas

I found html that apparently worked in mid-2015, but does not seem to work now. It uses <div class="enhanceable_content accordion">

Does anyone know how I can create either an accordion outline or an expndable/collapseable outline.

Tags (1)
5 Replies

This has been the subject of a lot of discussion this spring / summer. Canvas announced that they are deprecating the jQuery UI magic associated with the "enhanceable_content" class. It was never formally documented, it was just something that people knew about and took advantage of and advertised to other people.  Accordions were the first of the jQuery UI widgets to be removed: Canvas Production Release Notes (2017-06-24) . Those production notes contain a link to some unofficially supported code that Ryan Shaw through together to help people out. However, Ryan says this is a temporary workaround and that people should not rely on it for the long term.

The official deprecation explanation came from Ryan Shaw on March 30 in this conversation: Deprecated use of magic jQueryUI widget‌ did a blog post on using tabs, and I chimed in about the deprecation.

Then asked a question about Canvas Style Guide - Permanence?  that evoked another lengthy discussion.

I really don't have much to add beyond what has already been said, so the rest of this will be short.

As of right now (July 16, 2017), the accordion widget is still contained in the jQuery UI that Canvas is supplying, it's just not automatically converted for you. You can test this by opening a page that has an accordion on it and then opening the browser's console (usually F12), and pasting this code into the console.


You should see your content change to be an accordion. However, to make that happen inside Canvas automatically and not by someone pasting it into a browser console, it needs to be implemented in the custom JavaScript at an account or subaccount level. That means that instructors won't be able to do it themselves, they'll need to talk with their Canvas Admin.

There is no word on how long that will continue to work, though, so I don't recommend that the Canvas Admin implement it, although it would be a short-term quick fix. The recommended solution is for people to load their own library that will do accordions, tabs, sortables, or whatever else they were relying on the enhanceable_content class to do and replace the needed functionality with their own libraries.

For our institution, we haven't done anything yet. The only people using accordions the Canvas Admins documenting how to use accordions, but accordions were so bad that no one used them. Now, if tabs were to disappear, we'd [I'd] be working on getting a solution much faster. On the other hand, we may re-examine their purpose and whether or not they're meeting the intended goal and decide not to continue them.

I would take this time to talk with your Canvas Admin about how your school is going to support this going forward -- if they are at all. It may also be a time to reconsider how you break up the content.

Community Member

I'd like to add that after the discussion about the permanence of the style guide we decided not to try to implement anything like this. We are a relatively small operation, but it's just easier to work with what Canvas already has than to try to find different work-around solutions. Canvas has some pretty cool "hacks" built right into it that can organize content just as well.  

Learner II

You could use an element toggler to collapse an area of text:

Canvas styleguide Element Toggler

Ah, but does this also rely on jQueryUI and hence will also disappear at some point in the future?

John Burke

ARC Mathematics Dept.

Howard Hall 148


I don't think the element toggler is based of jQuery UI, but I haven't checked.  It isn't based on the "magic" jQuery UI class of enhanceable_content, so it's not going away in the short-run. But it does get to the point mentioned in the permanence of the style guide discussion -- the style guide is meant for people developing the Canvas software, it wasn't really intended for people trying to do stuff in Canvas. In that sense, it's documentation subject to change and isn't considered formal documentation like you would find in the Community guides or release notes.  If you use it, then you will want to make sure that you monitor your software to make sure it continues after every update.

That doesn't always work and I write a lot of stuff that other people use that I don't, so I rely on them to let me know when it stops working. I did discover one that worked find in Beta on Friday night but wasn't working in Production on Sunday night after the latest update. I've got to track it down -- not because I use it on Chrome (it still works on Firefox), but because one of my big points in my presentation next week at InstructureCon is about this one item that all of sudden isn't working any more (but just in Chrome).

If you have the people to monitor and check your customization, then go for it. If you're a small shop and don't have the time to stay on top of it, you may want to stick with what is built in and documented. For what I write, I'm trying to get it to integrate and look and feel like Canvas, so the Style Guide is of immeasurable help and it's a risk I need to take.