Generally, the ideal page layout for course materials in Canvas is to have the information readily visible and in hierarchical order. Making use of styles such as headings makes the page more accessible both visually and for assistive technologies. In addition to the hierarchy, other visual elements introduced in our previous post can be used to signal different messages to students.
Today, we have another tool for your page layout toolbox, collapsible content, sometimes referred to as an accordion. When I say accordion what may come to mind first is one of the most fun musical instruments to play and listen to, but what we are talking about in this post is a menu that is “a vertically stacked list of headers that can be clicked to reveal or hide content associated with them” (Loranger, 2014). Usually, these will reveal content under one header while hiding content in the rest. We can get a similar effect using a simple HTML tag, details.
Hi I’m Details, click here to see more great content.
The content here is hidden until you click the details summary. If you click it again, this content will disappear.
When Might Details be Useful?
From a practical perspective, sometimes there is additional information that would normally clutter a page that is either a nice to know – rather than need to know – or that provides other kinds of details that add to cognitive load. One recent use case for the latter was for a custom homepage we made for a recent online course. The page included a number of decorative images throughout. Normally, each of these would come with a caption indicating the figure number, the source, and the copyright permission. However, as these were strictly decorative images, we moved all of the copyright information to the bottom of the page and kept it in a collapsible details tag. This kept the required information on the same page, but ensured that the extra text did not distract from the content relevant for students’ learning.
A second, more pedagogical reason you might consider using this HTML tag is for creating opportunities for your students to check their understanding without “sending them down the hallway” to the quizzes area. Following descriptions and examples of a particular concept, for example, you could follow-up a case example, or scenario description with open ended questions. Ask students to pause and thing about the questions before revealing either the answer, or better yet, reasoning or thought process for how the questions might be addressed and further prompting questions.
Adding Simple Collapsible Content
To put one of these very plain and simple expandable content items into any Canvas page (where the rich content editor is available):
- Click Edit at the top of the page, then click the HTML button in the lower right corner.
- Copy and paste the code (in the grey box below) into the pretty HTML editor.
<details> <summary>Title that appears on screen</summary> This is everything that appears when the accordion/disclosure is opened. </details>
- Click the HTML button in the lower right again and you’ll see a static version of your collapsible content. Click Save to give it a try!
Some Additional Tricks
Shading the Details element to make it stand out
Using the background style, you can make the background any colour you’d like:
Title that appears on screen
This is everything that appears when the accordion/disclosure is opened.
<details style="background: #eee;"> <summary>Title that appears on screen</summary> This is everything that appears when the accordion/disclosure is opened. </details>
Providing some instruction that it is a show/hide interaction
Adding a tip that it is a show/hide interaction can be helpful as well. Here we add “show/hide” to the right in the summary:
Title that appears on screen (show/hide)
This is everything that appears when the accordion/disclosure is opened.
<details style="background: #eee;"> <summary>Title that appears on screen <em style="float: right;">(show/hide)</em></summary> This is everything that appears when the accordion/disclosure is opened. </details>
Details Inception
There might be some rare case where you need two layers of nested content. You can place one details element within another, like so:
Title that appears on screen (show/hide)
This is everything that appears when the accordion/disclosure is opened.
Title that appears within details, but contains more content (show/hide)
This is everything that appears when the accordion/disclosure is opened.
<details style="background: #eee; margin-bottom: 2rem; padding: .5rem 1 rem;"> <summary>Title that appears on screen <em style="float: right;">(show/hide)</em></summary> This is everything that appears when the accordion/disclosure is opened.<details style="background: #eee; margin-bottom: 2rem; padding: .5rem 1 rem;"> <summary>Title that appears within details, but contains more content <em style="float: right;">(show/hide)</em></summary> This is everything that appears when the accordion/disclosure is opened. </details> </details>
More Information and Examples
The Canvas Community has an excellent page that includes examples from others who are making use of details for a variety of contexts.