[ARCHIVED] How can I create accordion menus/collapsible content in Canvas?

[smreinke]

I'm using Canvas to manage professional development content across an entire division of professional staff and graduate assistant, and I'm trying to reduce the need to create overly long pages of content and/or loads of individual pages.

I've tried to figure this out on my own through web searches, but it looks like a lot has changed over the years in terms of Canvas' support of jQuery, javascript, and several features in general pertaining to accordion menus.

So, I figured I'd give it a shot here and see if anyone has come up with any new solutions.

Does anyone have any advice on implementing accordion menus in Canvas?

[nivi · Accepted solution]

Hi Scott

I have had the same issue and have found a solution using H5P – Create and Share Rich HTML5 Content and Applications 

There you can create an accordion and copy the embed code as an iframe into a Canvas page.

[cholling · Accepted solution]

I'm working on a course and using the Canvas hack. It's mostly working ok -- I don't like the extra amount of space at the bottom of each panel or the bright blue color of the header, but it seems to be working in all browsers as well as on mobile devices. I'd rather not use a deprecated coding though. I've tried to read through the various github and hp5 options, but just don't "get it." Where do you put this code? 

Can someone walk me through it?

Thanks.

Cindy.

[Shar · Accepted solution]

Hi Cynthia,

Which Canvas hack for accordions are you using? How comfortable are you in using the HTML editor?

You asked "where do you put his code?" and the answer depends on what code you're using.

If you want something that will not deprecate and works in mobile, I'll suggest the W3 School Bootstrap Collapse. Here's what I did to try it out:

1. Copy code from the Accordion Try it Example
2. Paste into a blank file and called it accordion.html
3. Upload the accordion.html file either to a webserver or the Canvas Files
4. Grab the URL for the accordion.html file. If the file is in Canvas, the easy way to get the URL is to:
   1. Add the file to to the page and then
   2. Copy the src reference through the word download before the ?
5. Iframe embed the file onto the page:

<div id="accordion-holder" >
<iframe src="https://xxxx.instructure.com/files/201637/download" width="98%"
height="390"></iframe>
</div>‍‍‍‍‍‍‍‍

You'll still end up with something that users will need to scroll on a mobile device, but the accordion will still collapse. The advantage of a separate file is that you can just update the file and it will still display on the page as intended. I like to host those files on a web server so it's easy for me to replace the file at the source regardless of the Canvas course where the file is used.

Cheers - Shar

[nivi · Accepted solution]

Hi Scott

I have had the same issue and have found a solution using H5P – Create and Share Rich HTML5 Content and Applications 

There you can create an accordion and copy the embed code as an iframe into a Canvas page.

[cholling · Accepted solution]

I'm working on a course and using the Canvas hack. It's mostly working ok -- I don't like the extra amount of space at the bottom of each panel or the bright blue color of the header, but it seems to be working in all browsers as well as on mobile devices. I'd rather not use a deprecated coding though. I've tried to read through the various github and hp5 options, but just don't "get it." Where do you put this code? 

Can someone walk me through it?

Thanks.

Cindy.

[Shar · Accepted solution]

Hi Cynthia,

Which Canvas hack for accordions are you using? How comfortable are you in using the HTML editor?

You asked "where do you put his code?" and the answer depends on what code you're using.

If you want something that will not deprecate and works in mobile, I'll suggest the W3 School Bootstrap Collapse. Here's what I did to try it out:

1. Copy code from the Accordion Try it Example
2. Paste into a blank file and called it accordion.html
3. Upload the accordion.html file either to a webserver or the Canvas Files
4. Grab the URL for the accordion.html file. If the file is in Canvas, the easy way to get the URL is to:
   1. Add the file to to the page and then
   2. Copy the src reference through the word download before the ?
5. Iframe embed the file onto the page:

<div id="accordion-holder" >
<iframe src="https://xxxx.instructure.com/files/201637/download" width="98%"
height="390"></iframe>
</div>‍‍‍‍‍‍‍‍

You'll still end up with something that users will need to scroll on a mobile device, but the accordion will still collapse. The advantage of a separate file is that you can just update the file and it will still display on the page as intended. I like to host those files on a web server so it's easy for me to replace the file at the source regardless of the Canvas course where the file is used.

Cheers - Shar

[James · Accepted solution]

I'm going to give the less popular answer.

Don't embed it. Navigation with iframes can be problematic (you need to use full URLs) which makes it difficult to link back to the course content directly and formatting isn't carried over from Canvas. This makes it a seem like a different system -- in which case you might just want to make it a different system all together. See Embedding an Uploaded HTML page in an iFrame for more information on embedding.

Don't hack it at the course level. If you want a smooth integration with Canvas, then support it at the institutional level. If you want to have your own content outside Canvas, but need to do tracking or assign grades, then consider an LTI external tool.

If you want the seamless effect and you believe that accordions are the best solution, then convince your Canvas Admin for an account or sub-account to add the global JavaScript and CSS needed to support accordions. Then mark it up using a class within the HTML on the Canvas Page. Do not use the .enhanced_content .accordions; that has been deprecated -- accordions was the first thing to go in Canvas' deprecation of jQuery UI -- probably because of low usage and bad accessibility. If you do install it at the account level, then share the code with others so that they can use the accordions as well. That way everyone is on the same page and you can keep the excess code to a minimum.

Be careful which library you pick to support accordions as you'll need to ensure accessibility rather than Canvas checking for you. Instructure claims to make a really good library, but you can't use it if you want to incorporate content directly inside Canvas. You can only use it if you want to embed content and load ReactJS and InstUI in an iframe where the content is hosted elsewhere. You may want to check out accessible accordions on the W3C site -- the code used in their accordion example isn't too long. Also realize that there are issue printing them (also with tabs) so consider overriding the print media CSS. 

If you cannot convince the Canvas Admin that accordions are the way to go, then chunk your page into several smaller pages.

[cholling]

Thanks Scott and  @James ‌. I am comfortable with HTML but knew that Canvas strips stuff out. I had never thought of including it elsewhere. I understand your position, James, and it makes perfect sense.