With accordions, you can include a lot of content on a page without taking up a lot of real estate. They’re great for creating FAQ lists (which I encourage faculty to include for more complicated assignments) or glossaries of technical terms in a course.
Note that my example screenshot here shows two different styles of accordions: The first one has a border under its heading, and the second one has a light background behind its heading. Otherwise, they’re essentially the same.
Note that creating accordions in Canvas was a significant challenge because it won’t allow you to use the input tag, and many accordions are created using radio buttons. After a LOT of trial and error, I found that summary and details tags provided the only solution that would work in Canvas using just CSS and HTML. (Javascript may provide a better alternative, but I have not yet dived into adding custom Javascript to Canvas.)
Considerations
This layout is really straightforward—you can put pretty much any content in one of these accordions. However, you’ll probably want to keep section titles short; otherwise, they may take up too much space on mobile devices.
Code
The styling for both versions of my accordion is included in this pen, and they’re duplicated in the HTML for demo purposes.
