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:
View
Animated Chalkboard Presentation
View
Genial Storytale Presentation
View
Blackboard Presentation
View
Psychedelic Presentation
View
Chalkboard Presentation
View
Witchcraft Presentation
View
Sketchbook Presentation
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.