Want to create interactive content? It’s easy in Genially!
Collapsibles & Side Bars
Connected Community
Created on November 13, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
Side Bars
Collapsible Drop Downs
This is a great way to make connections to Pop Culture and the world students live in without getting completely sidetracked from the Content.
This is a great way to store resources, provide examples, and more for students in Canvas.
Simplest Code: <details> <summary>Data</summary> What a baby computer calls its father </details>
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>
1. Hex Codes for Color 2. You can add extra details sections. 3. Title and Content of the drop down. 4. Don't forget to close your Div.
Side Bar Code:
Remember: All of this code is copy and paste from the Advanced Design Notebook.
Title and Content
Title of the 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>
Contents of the Accordion
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>
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>
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.