Create Drop Downs

[CamRobb]

Hello. I am wanting to create drop down menus within the course overview pages. For example, one drop down could include course reading for the week and another could have assignments. Is this possible? I have looked around these forums for an answer and cant seem to find one. 

[Gabriel33]

Canvas limits what type of HTML a user can add to the Rich Content Editor, following mostly this page here: Canvas HTML Editor Allowlist - Instructure Community - 387066  
Anything more than that and you'd need Admin rights and then add CSS or Javascript to the Canvas instance, or a third party solution that adds those to Canvas.

To achieve something like that within the HTML allow list, I believe the instructor would need to be willing to update the page every week with the current readings/assignments, and instead of a drop down, they can use the details and summary tags: HTML details Tag

Note that there's also an option to use tabs instead of details/summary, but that has been under a possible deprecation notice since at least 2017 (see the first comment): Making a Content Page with Tabs - Instructure Community - 279010 

Alternatively, you can have a page with links for each week to either other pages or to modules with the readings and the assignments.

[Ron_Bowman]

@CamRobb as far as what @Gabriel33 mentioned regarding deprecation, that is true.  However, for right now the following may be something you can work with and adjust as needed.  I am not sure how the code will come out but I will try to post it.  This is something I have been playing around with for my courses. You should be able to post the code below into a page and see what it looks like.

Good luck

Ron

<div class="enhanceable_content accordion">
<h3><a href="#">Section 1</a></h3>
<div style="padding: 15px;">
<p>Section 1 Content</p>
<div class="enhanceable_content tabs">
<ul>
<li style="background-color: #fff53d;"><a href="#fragment-1">Tab One</a></li>
<li style="background-color: #00f5ff;"><a href="#fragment-2">Tab Two</a></li>
<li style="background-color: #22eb00;"><a href="#fragment-3">Tab Three</a></li>
</ul>
<div id="fragment-1">
<div class="enhanceable_content accordion">
<h3><a href="#">Section 1</a></h3>
<div style="padding: 15px;">
<p>Section 1 Content</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div style="padding: 15px;">
<p>Section 2 Content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div style="padding: 15px;">
<p>Section 3 Content</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</div>
<div id="fragment-2">Tab 2 content</div>
<div id="fragment-3">Tab 3 content</div>
</div>
</div>
<h3><a href="#">Section 2</a></h3>
<div style="padding: 15px;">
<p>Section 2 Content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div style="padding: 15px;">
<p>Section 3 Content</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<div class="enhanceable_content tabs">
<ul>
<li style="background-color: #fff53d;"><a href="#fragment-1">Tab One</a></li>
<li style="background-color: #00f5ff;"><a href="#fragment-2">Tab Two</a></li>
<li style="background-color: #22eb00;"><a href="#fragment-3">Tab Three</a></li>
</ul>
<div id="fragment-1">
<div class="enhanceable_content accordion">
<h3><a href="#">Section 1</a></h3>
<div style="padding: 15px;">
<p>Section 1 Content</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div style="padding: 15px;">
<p>Section 2 Content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div style="padding: 15px;">
<p>Section 3 Content</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</div>
<div id="fragment-2">Tab 2 content</div>
<div id="fragment-3">Tab 3 content</div>
</div>
<p>&nbsp;</p>