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.
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?
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.
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?
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:
<div id="accordion-holder" >
<iframe src="https://xxxx.instructure.com/files/201637/download" width="98%"
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
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.
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.
Thanks Scott and firstname.lastname@example.org. 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.