Table of Contents

Click-To-Reveal Accordions in Canvas

Markette Pierce Updated by Markette Pierce

Click-To-Reveal Accordions in Canvas

In click-to-reveal interactions, learners click a button or other interactive element to reveal hidden content. Click-to-reveals have many uses, such as organizing content on a page, hiding answers to questions, or providing deeper information about a concept. The recommended method of creating click-to-reveal content in courses is accordions made using the <details> and <summary> tags.

Accordions are accessible to screen-reader users when they include the cursor property, and they are easily interpreted by the course transcript maker.

Accordions

Use the pre-built accordion examples HTML: Accordion for Lists/Sections or the Flyover Conversion template.

The basic markup for creating an accordion in HTML is:

<details>
    <summary style="cursor: default;">Question: What video game was the first to win a Hugo award?</summary>  
    <p>Hades, by Supergiant Games.</p>
</details>

More information on using the <details> tag is available from MDN Web Docs.

How did we do?

Course Content Style Guide

Course Maintenance Issue Resolution Process

Contact