Accordion Menus [advanced]

Aug 9

Written By Sean Nufer

Accordions using advanced CSS

Last week we discovered that we can make rudimentary accordion menus in Canvas. Today we will look at how to leverage more advanced CSS features to truly customize the accordion experience for our students. How do we adjust the colors, sizes, spacing, adding emojis, creating interactive buttons, and even building a quick links interactive widget. Follow along on the demo Canvas page:

https://canvas.instructure.com/courses/2560052/pages/accordion

Glossary with color background

Snapchat

Thanos' favorite social media platform

Snapchat

Thanos' favorite social media platform

Snapchat

Thanos' favorite social media platform

<div style="padding: 15px; background-color: #f9f7f0; margin-bottom: 25px;">
    <details>
        <summary style="cursor: pointer;">Snapchat</summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
    <details>
        <summary style="cursor: pointer;">Snapchat</summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
    <details>
        <summary style="cursor: pointer;">Snapchat</summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
</div>

Glossary with more colors

Snapchat

Thanos' favorite social media platform

Snapchat

Thanos' favorite social media platform

Snapchat

Thanos' favorite social media platform

<div style="padding: 15px; background-color: #f3f7f7; margin-bottom: 25px;">
    <details>
        <summary style="cursor: pointer; background-color: #e6efee;">Snapchat</summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
    <details>
        <summary style="cursor: pointer; background-color: #cddfdd; padding-left: 5px;">Snapchat</summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
    <details>
        <summary style="cursor: pointer; background-color: #b4cfcc; padding-left: 10px;">Snapchat</summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
</div>

Emojis: 😀 🌎 🍉

😀 Snapchat

Thanos' favorite social media platform

🌎 Snapchat

Thanos' favorite social media platform

🍉 Snapchat

Thanos' favorite social media platform

<div style="padding: 15px; background-color: #f3f7f7; margin-bottom: 25px;">
    <details>
        <summary style="cursor: pointer; background-color: #e6efee;">😀 Snapchat</summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
    <details>
        <summary style="cursor: pointer; background-color: #cddfdd;">🌎 Snapchat</summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
    <details>
        <summary style="cursor: pointer; background-color: #b4cfcc;">🍉 Snapchat</summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
</div>

Large color headings (summaries)

😀 Snapchat

Thanos' favorite social media platform

🌎 Snapchat

Thanos' favorite social media platform

🍉 Snapchat

Thanos' favorite social media platform

<div style="padding: 15px; background-color: #f3f7f7; margin-bottom: 25px;">
    <details>
        <summary style="color: #126369; font-family: 'arial black', 'avant garde'; font-size: 28pt; cursor: pointer;"><strong>😀 Snapchat</strong></summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
    <details>
        <summary style="color: #126369; font-family: 'arial black', 'avant garde'; font-size: 28pt; cursor: pointer;"><strong>🌎 Snapchat</strong></summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
    <details>
        <summary style="color: #126369; font-family: 'arial black', 'avant garde'; font-size: 28pt; cursor: pointer;"><strong>🍉 Snapchat</strong></summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px;">
            <p>Thanos' favorite social media platform</p>
        </div>
    </details>
</div>

Show and tell accordion button

Click to Show/Hide Gif

Spinning Panda.gif

<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 Show/Hide Gif</summary>
        <div style="margin-top: 20px;"><img src="https://canvas.instructure.com/courses/2560052/files/126041905/preview" alt="Spinning Panda.gif" width="250"/></div>
    </details>
</div>

Quick links box

Quick Links

More info (click to reveal)

First link
Penultimate link
Third link

FAQ (click to reveal)

Glossier hammock leggings pinterest, disrupt tattooed la croix you probably haven't heard of them

<div class="border border-trbl border-round" style="color: #124250; float: right; width: 350px; border: 6px solid #588983; background-color: #f3f7f7; padding: 0 16px 8px 16px; margin: 0 0 10px 10px;">
    <h2 style="color: #588983;"><strong><span style="font-family: 'trebuchet ms', geneva;">Quick Links</span></strong></h2>
    <details>
        <summary style="color: #588983; cursor: pointer;">More info <small>(click to reveal)</small></summary>
        <div>
            <ul>
                <li>First link</li>
                <li>Penultimate link</li>
                <li>Third link</li>
            </ul>
        </div>
    </details>
    <details>
        <summary style="color: #588983; cursor: pointer;">FAQ <small>(click to reveal)</small></summary>
        <div>
            <p style="padding-left: 10px;">Glossier hammock leggings pinterest, disrupt tattooed la croix you probably haven't heard of them</p>
        </div>
    </details>
</div>

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas

Sean Nufer

Amazing Canvas background effects

Accordion Menus [simple]