Learn more about using the details tag in this GMCTL EdTech Blog post: Hide and Reveal Content in Canvas Pages with this HTML Trick

Simple:

Title that appears on screen

This is everything that appears when the accordion/disclosure is opened.

Code snippet:

<details>
    <summary>Title for Spoiler</summary>
    This is everything that appears when the accordion/disclosure is opened.
</details>

Shaded:

Title that appears on screen

This is everything that appears when the accordion/disclosure is opened.

Code snippet:

<details style="background: #eee;">
    <summary>Title that appears on screen</summary>
    This is everything that appears when the accordion/disclosure is opened.
</details>

With Instruction:

Title that appears on screen (show/hide)

This is everything that appears when the accordion/disclosure is opened.

Code snippet:

<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>

Nested:

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.

Code snippet:

<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>

With Padding and Bounded Box:

Title that appears on screen

This is everything that appears when the accordion/disclosure is opened.

Code snippet:

<details>
    <summary class="pad-box-mini border-round" style="background-color: whitesmoke; cursor: pointer;">Title that appears on screen</summary>
    <div id="reveal" class="pad-box-mini border-round" style="border: thin solid grey;">
        <p><span>This is everything that appears when the accordion/disclosure is opened.</span></p>
    </div>
</details>

Padded and Shaded:

Title that appears on screen

This is everything that appears when the accordion/disclosure is opened.

Code snippet:

<details style="background: #efefed; margin-bottom: 0.5rem; padding: .5rem 1rem;">
    <summary style="cursor: pointer;"><strong><span style="font-size: 14pt;">Title that appears on screen</span></strong></summary>
    <p>This is everything that appears when the accordion/disclosure is opened.</p>
</details>

Show/Hide Button:

Click to Reveal

Put content in here

Code snippet:

<div style="margin-bottom: 20px;">
    <details>
        <summary style="cursor: pointer; font-size: large; border: 1px solid #D6D9DC; background-color: #f5f5f5; padding: 10px 10px 10px 20px; border-radius: 25px; width: 230px;" role="button" aria-expanded="false">Click to Reveal</summary>
        <div style="margin-top: 20px;">Put content in here</div>
    </details>
</div>

Show/Hide Button with Bounded Box:

Click to Reveal

Put content in here

Code snippet:

<div style="margin-bottom: 20px;">
    <details>
        <summary style="cursor: pointer; font-size: large; border: 1px solid #D6D9DC; background-color: #f5f5f5; padding: 10px 10px 10px 20px; border-radius: 25px; width: 230px;" role="button" aria-expanded="false">Click to Reveal</summary>
        <div id="reveal" class="pad-box-mini border-round" style="border: thin solid grey; margin-top: 20px;">Put content in here</div>
    </details>
</div>

Shaded and Structured:

This presentation uses a bit more structure or "scaffolding" within the collapsible element, with some icons to reinforce the purpose of each portion of content.

Title of section goes here

In this section:

[Tell the learners what to expect, cover essential terminology, provide some context for the materials/activities to follow, or connect this section to other parts of the course and to assessments/projects the learners will be working on.]

Read the following:

[List the readings/videos/links here]
...
...

Try this:

[Give the learners some kind of active learning task or to-do; a chance for practice or to apply the concepts they are learning about.]

Code snippet:

<details>
    <summary class="pad-box-mini border-round" style="margin-bottom: 0; padding: 10px; border-radius: 5; border-style: none; border-width: 0; color: #ffffff; background: #0B6A41;"><span style="font-size: 14pt;"><strong>Title of section goes here</strong></span></summary>
    <div id="reveal" class="pad-box-mini border-round" style="border: thin solid grey; border-radius: 5; background: #eee;">
        <p><i class="icon-educators"></i> <em><strong>In this section:</strong></em></p>
        <p>[Tell the learners what to expect, cover essential terminology, provide some context for the materials/activities to follow, or connect this section to other parts of the course and to assessments/projects the learners will be working on.]</p>
        <hr />
        <p><i class="icon-collection"></i> <em><strong>Read the following:</strong></em></p>
        <ul>
            <li>[List the readings/videos/links here]</li>
            <li>...</li>
            <li>...</li>
        </ul>
        <hr />
        <p><i class="icon-annotate"></i> <em><strong>Try this:</strong></em></p>
        <p>[Give the learners some kind of active learning task or to-do; a chance for practice or to apply the concepts they are learning about.]</p>
    </div>
</details>