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
Memories Presentation
View
Pechakucha Presentation
View
Decades Presentation
View
Color and Shapes Presentation
View
Historical Presentation
View
To the Moon Presentation
View
Projection 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.