Collapsibles & Side Bars

This is a great way to make connections to Pop Culture and the world students live in without getting completely sidetracked from the Content.

Side Bars

Simplest Code: <details> <summary>Data</summary> What a baby computer calls its father </details>

This is a great way to store resources, provide examples, and more for students in Canvas.

Collapsible Drop Downs

1. Hex Codes for Color2. You can add extra details sections. 3. Title and Content of the drop down.4. Don't forget to close your Div.

Advanced Collapsibles (AKA Accordion)

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

Remember: All of this code is copy and paste from the Advanced Design Notebook.

Side Bar Code:

Contents of the Accordion

Title of the Accordion

Title and Content

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

Hex Codes

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

To add extra sections, please copy from <details> down to the </details>.

Adding Internal Sections

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

Remember to match an open tag with a close tag. The whole section will have a <div> tag and the content section for each drop down will have another one.

Adding Internal Sections

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