Hide and Reveal Content in Canvas Pages with this HTML Trick

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.

Continue reading “Hide and Reveal Content in Canvas Pages with this HTML Trick”

Canvas HTML editing

At the start of 2021 Canvas released a new Rich Content Editor (RCE) with a variety of new and updated features. Despite these upgrades the Instructional Design team at DEU has had a number of requests from instructors for some specific ways to enhance the look of their course content pages. The HTML Editor in the RCE allows you to do some basic HTML editing on course pages to add features and functions otherwise not available in the main editor. However, this is not a TRUE HTML editor in that Canvas will, at times, strip out or block any HTML code that it sees as a security risk. If you hit a wall trying to make HTML work in Canvas, that is likely why. A second warning is to perhaps practice in a test course before trying these methods in your live class as you can inadvertently cause errors on your page if you’re not a seasoned HTML’er. That said, you don’t need a background in coding to try out some of these features. A little patience and an adventurous spirit should get you through.

In this post we’ll look at adding some simple code snippets to add to the HTML editor in the Canvas RCE to help add function and create more dynamic web pages in your Canvas course. From Text Boxes, Line Breaks, Wrapping Text to Creating Interactive Buttons, see some of the common items people are adding to their course pages using the HTML editor. Continue reading “Canvas HTML editing”