Collapse & Expand Modules

For various reasons I decided to write a little CSS & JS to do the following:

Load the modules page with all modules collapsed by default
Create a button on the modules page to Expand/Collapse all modules
When a user clicks on a link that takes them to a module in the modules page, make the modules page load with all modules collapsed EXCEPT the module that was clicked on the previous page.

This is what the page looks like when first opened. Notice the button at the top "Expand All Modules."

This is what the page looks like with the modules expanded. Notice the button at the top "Collapse All Modules."

I am putting the code here for others to use and improve. If you make improvements, please share them with the rest of the community. I am not a coding professional and consider myself to be an intermediate level, NOT an expert (although I got some help from some experts when I got stuck during this project Smiley Happy .)

If you have suggestions, please feel free to let me know. I'm always looking to improve my coding Smiley Happy

**DISCLAIMER**

This code is 100% unsupported by me and/or by Instructure. Use it at your own risk. Always try new code in your test or beta environments first. This will probably break. If you don't have someone on staff who can maintain it or fix it when it breaks, you will want to seriously reconsider using it in the first place.

Add this to the CSS file:

<SPAN class="comment token">/*  Collapse all modules. <BR />     use this in combination with JS to auto-open the module link that was <BR />     clicked to navigate to the page */</SPAN><BR /><BR /><SPAN class="selector token">#content #context_modules .content,<BR />#content #context_modules .collapse_module_link</SPAN> <SPAN class="punctuation token">{</SPAN><BR />  <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><BR /><SPAN class="selector token">#content #context_modules .expand_module_link</SPAN> <SPAN class="punctuation token">{</SPAN><BR />  <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> inline-block<SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Add this to the JavaScript file:

<SPAN class="comment token">//</SPAN><BR /><SPAN class="comment token">// Use in combination with CSS that loads all modules in a collapsed state.</SPAN><BR /><SPAN class="comment token">// When navigation to the modules page is to a specific module, </SPAN><BR /><SPAN class="comment token">// automagically click the module so it opens in an expanded state.</SPAN><BR /><SPAN class="comment token">//</SPAN><BR /><SPAN class="keyword token">var</SPAN> anchor <SPAN class="operator token">=</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>hash<SPAN class="punctuation token">;</SPAN><BR /><SPAN class="keyword token">var</SPAN> underscore <SPAN class="operator token">=</SPAN> anchor<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"_"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="keyword token">var</SPAN> characters <SPAN class="operator token">=</SPAN> anchor<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN><BR /><SPAN class="keyword token">var</SPAN>     module <SPAN class="operator token">=</SPAN> anchor<SPAN class="punctuation token">.</SPAN><SPAN class="token function">substring</SPAN><SPAN class="punctuation token">(</SPAN>underscore<SPAN class="punctuation token">,</SPAN>characters<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="keyword token">var</SPAN> selector <SPAN class="operator token">=</SPAN> <SPAN class="string token">"span[aria-controls='context_module_content_"</SPAN><SPAN class="operator token">+</SPAN>module<SPAN class="operator token">+</SPAN><SPAN class="string token">"']"</SPAN><SPAN class="punctuation token">;</SPAN><BR />console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>selector<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR />window<SPAN class="punctuation token">.</SPAN>onload <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="token function">expand_module</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="keyword token">function</SPAN> <SPAN class="token function">expand_module</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN>selector<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">click</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />     console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click attempted"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><BR /><SPAN class="comment token">//</SPAN><BR /><SPAN class="comment token">// Add button and script to expand and collapse all modules</SPAN><BR /><SPAN class="comment token">//</SPAN><BR /><BR /><SPAN class="comment token">// Create the button on Modules pages</SPAN><BR /><SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>href<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"modules"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />     document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.header-bar-right__buttons'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">insertAdjacentHTML</SPAN><SPAN class="punctuation token">(</SPAN> <SPAN class="string token">'afterbegin'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'<button class="btn" id="expand-collapse-modules" status="collapsed" onclick="expand_collapse_modules()"><span class="screenreader-only">Collapse or expand all modules</span>Expand All Modules</button>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />    <SPAN class="punctuation token">}</SPAN><BR /><BR /><SPAN class="comment token">// when the button is clicked, expand or collapse all modules that are not currently expanded or contracted.</SPAN><BR /><SPAN class="keyword token">function</SPAN> <SPAN class="token function">expand_collapse_modules</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <BR /><SPAN class="punctuation token">{</SPAN><BR /><BR />    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"expand-collapse-modules"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>status <SPAN class="operator token">==</SPAN> <SPAN class="string token">"collapsed"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN><BR />         document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"expand-collapse-modules"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerText <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Expand All Modules"</SPAN><SPAN class="punctuation token">;</SPAN><BR />         document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"expand-collapse-modules"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>status <SPAN class="operator token">=</SPAN> <SPAN class="string token">"expanded"</SPAN><SPAN class="punctuation token">;</SPAN><BR />          <SPAN class="keyword token">var</SPAN> items <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"span[style='display: inline-block;'][aria-expanded='true']"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><BR />         <SPAN class="punctuation token">}</SPAN><BR />    <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>         <BR />         document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"expand-collapse-modules"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerText <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Collapse All Modules"</SPAN><SPAN class="punctuation token">;</SPAN><BR />         document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"expand-collapse-modules"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>status <SPAN class="operator token">=</SPAN> <SPAN class="string token">"collapsed"</SPAN><SPAN class="punctuation token">;</SPAN><BR />          <SPAN class="keyword token">var</SPAN> items <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelectorAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".expand_module_link:not([style='display: none;'])"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />         <SPAN class="punctuation token">}</SPAN><BR />         <BR />    <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i <SPAN class="operator token">=</SPAN> items<SPAN class="punctuation token">.</SPAN>length<SPAN class="number token">-1</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token">>=</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">--</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>   <BR />        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>i<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />        items<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">click</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />    <SPAN class="punctuation token">}</SPAN><BR />         <BR /><SPAN class="punctuation token">}</SPAN> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

The code is also attached to this blog for your convenience.

collapse_modules.css

Find more posts tagged with

Comments

irishb

Hi Deactivated user‌!

Thanks so much for developing and sharing this lil' gem of functionality - we tested it last week and just added it to our college's production instance today, will let you know what our faculty and students think! : )

Best wishes,

Bridget Irish

Curricular Technology Support | Canvas Admin
The Evergreen State College, Olympia WA

Boekenoogen

This is a nice bonus feature that Instructure should add to their code. Thanks for sharing this with the community.

mcowen

This is a common question I receive, so I thought I'd post it here...

Question:

Does this mean that the Modules page would load up quicker where there is a very long Modules list? I have a problem with very slow load times on a long Modules list currently and am looking for a solution?

Answer:

Yes. My intention when I wrote it was purely cosmetic, but an added benefit is faster load times Smiley Happy Yay!

As always, make sure to try any code in your TEST or BETA instance before using it in production.

dtod

Latest release broke this for us. I think the issue is that the module content is loading asynchronously. Updated version below, which also remembers which modules are expanded and collapsed during a session - called by calling expand_module():

function showModule(obj){<BR />     var relatedObj = obj.getAttribute('aria-controls');<BR />     //console.log(relatedObj);<BR />     //console.log(document.getElementById(relatedObj).style.display);<BR />     if (document.getElementById(relatedObj).style.display == "" || document.getElementById(relatedObj).style.display == "none"){<BR />          obj.click();<BR />          // try again<BR />          setTimeout(function(){ showModule(obj); },500);<BR />     }<BR />}<BR /><BR />function expand_module() {<BR />     var anchor = window.location.hash;<BR />     var underscore = anchor.indexOf("_") + 1;<BR />     var characters = anchor.length;<BR />     var module = anchor.substring(underscore,characters);<BR />     var thishref = window.location.pathname;<BR />     if (module =="" && sessionStorage[thishref]){<BR />          module = sessionStorage[thishref];<BR />     }<BR />     <BR />     var modules=module.split(',');<BR />     //console.log(module);<BR />     <BR />     if (module!=""){<BR />          for (var x=0; x<modules.length; x++){<BR />               var selector = "span[aria-controls='context_module_content_"+modules[x]+"'][aria-expanded='false']";<BR />               //console.log(modules[x]);<BR />               if (document.querySelector(selector) && modules[x]!=""){<BR />                    //console.log('clicking ' + modules[x]);<BR />                    //console.log(selector);<BR />                    //console.log(document.querySelector(selector));<BR />                    //document.querySelector(selector).click();<BR />                    showModule(document.querySelector(selector));<BR />               }<BR />          }<BR />     }<BR />     else if (document.querySelectorAll("span[aria-controls^='context_module_content_']")[1]) {<BR />          //console.log('default');<BR />          //document.querySelectorAll("span[aria-controls^='context_module_content_']")[1].click();<BR />          showModule(document.querySelectorAll("span[aria-controls^='context_module_content_']")[1]);<BR />          sessionStorage[window.location.pathname]="," + document.querySelectorAll("span[aria-controls^='context_module_content_']")[1].parentNode.id;<BR />     }<BR />     <BR />    //console.log("click attempted; now add button");<BR />     <BR />     //<BR />     // Add button and script to expand and collapse all modules<BR />     //<BR /><BR />     // Create the button on Modules pages<BR />     if(window.location.href.indexOf("modules") > -1 && document.querySelector('.header-bar-right__buttons') && !document.querySelector('#expand-collapse-modules')) {<BR />           document.querySelector('.header-bar-right__buttons').insertAdjacentHTML( 'afterbegin', '<button class="btn" id="expand-collapse-modules" status="collapsed" onclick="expand_collapse_modules()"><span class="screenreader-only">Collapse or expand all modules</span>Expand All Modules</button>');<BR />     }<BR /><BR />     if (thishref.indexOf("modules") > -1){<BR />          // capture expand and collapse ajax calls<BR />          $(document).ajaxSuccess(function(event, request, settings) {<BR />                 //console.log(settings);<BR />                 <BR />                 if (/^\/courses\/\d+\/modules\/\d+\/collapse$/.test(settings.url) && settings.type=="POST"){<BR />                    var urlComponents=settings.url.split('/');<BR />                    module=urlComponents[urlComponents.length-2];<BR />                    //console.log(module);<BR />                    var expandedModules="";<BR />                    var update=false;<BR />                    if (sessionStorage[window.location.pathname]){<BR />                         expandedModules=sessionStorage[window.location.pathname];<BR />                    }<BR />                    if (settings.data.indexOf('collapse=1')>-1){<BR />                         //collapsed<BR />                         update=true;<BR />                         expandedModules = expandedModules.replace("," + module,"");<BR />                    }<BR />                    else if (module!="undefined" && expandedModules.indexOf("," + module)==-1){<BR />                         //expanded<BR />                         update=true;<BR />                         expandedModules = expandedModules + "," + module;<BR />                    }<BR />                    if (update) sessionStorage[window.location.pathname]=expandedModules;<BR />                 }<BR />          });<BR />     }<BR />}<BR /><BR />// when the button is clicked, expand or collapse all modules that are not currently expanded or contracted.<BR />function expand_collapse_modules() {<BR />    if (document.getElementById("expand-collapse-modules").status == "collapsed"){<BR />         document.getElementById("expand-collapse-modules").innerText = "Expand All Modules";<BR />         document.getElementById("expand-collapse-modules").status = "expanded";<BR />          var items = document.querySelectorAll("span[style='display: inline-block;'][aria-expanded='true']");<BR /><BR />         }<BR />    else {         <BR />         document.getElementById("expand-collapse-modules").innerText = "Collapse All Modules";<BR />         document.getElementById("expand-collapse-modules").status = "collapsed";<BR />          var items = document.querySelectorAll(".expand_module_link:not([style='display: none;'])");<BR />         }<BR />         <BR />    for (var i = items.length-1; i >= 0 ; i--) {   <BR />        // console.log(i);<BR />        items[i].click();<BR />    }<BR />}<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

sharon_kitching

Just trying this out on BETA, and the button isn't generating. Any idea why? It's a fantastic idea Smiley Happy

unknown

@dtod Based on your reply, your revised code will automatically expand the module the user last had expanded - is that correct? The code originally linked in the blog currently works for us, but your code does not generate the button. We would love to have it remember the last module you were working in and have that expanded.

sgarcia1

A big THANK YOU to @mcowen @dtod and everyone who contributed to this. Just what my organization needed and works perfectly for me right now.

The only thing I can add is that the Collapse All / Expand all button is already implemented in the latest versions of Canvas, so there is no need for the second part of the Javascript code: "2. Create a button on the modules page to Expand/Collapse all modules".

No clue why this is not a native option in Canvas but again, thank you, guys.

asergay

Anyone still working on this? We don't need the button any more, and it doesn't remember the expanded module. I'm tinkering with it but I'm no coder.

+1 Should be a native feature

NoahBoswell

@asergay I might be wrong, but I don't believe so. Most of this conversation was from 4-5 years ago, and Canvas has released several updates, especially with modules, since then which means it likely no longer applies to the current canvas interface.

Robert

@asergay,

As others have noted there is a native collapse/expand button now. As a Student or Admin I can collapse all modules, expand one, refresh and the expanded module remains open.

Not sure if still working on this is a status I'd choose. I think I've seen chatter that Canvas is working on a module redesign?

But in 2020, I was – actively trying to do a mashup of module modifications for my InstructureCon presentation. If memory serves, I was at a point where I was trying to get this to work as a student and maintain the states on refresh, which probably needs to incorporate some localStorage.

https://gist.github.com/robert-carroll/f70594aa4b6f6b8acfe7887eeb838b06

https://gist.github.com/robert-carroll/12717270d15c885f2908371e7bfab838

In the second gist, noticed the css in the gist duplicated at line 34. Fine in the first.

Unfortunately, I don't see myself having the bandwidth to progress this, but I'll share if it helps the conversation or someone else get a starting point.

My mashup was to combine Mike Cowan's buttons, @dtod's changes, and David Lyons' filters, in an effort to make large module pages more manageable and provide focus. I was also planning to implement @jbell0385's Module Completion Tracker

In addition to the comments on the gist, my other files had the following comments.

/*
issues: in student view, the collapse/expand ajax isn't sticky... either 'clicking' the wrong link, or can't duplicate
  odd behvior on student view of modules
  expand/collapse button:
    expand collapse works as expected
    -- but save state of student view doesn't seem to hold on refresh sometimes?
    -- on page load, clicking the collapse button collapses, and on refresh the state of each module is collapses
    
    -- but expanding, and refreshing does not result in open modules... am I clicking the right selectors for the POST?


state of expand/collapse is incorrect after a few clicks, incorpoate state management for expand button
*/

asergay

Yes, Modules does now have its own collapse all button. The old script works to open the Modules page with all modules collapsed, which we like. It doesn't remember the open module, which we don't like. Having all modules collapsed at opening but remembering the open one would be a huge boon to our teachers who feel overwhelmed by the amount of stuff on the page.

I just thought maybe there was a simple revision that could make the memory part work, as it seems to have at one point.

I'd also like to be able to filter module items. I actually need a third layer: course/supermodule/module. We would like to give teachers curriculum material in a blueprint but make it easy to hide if they don't want to use it. We considered having the material in the Commons but teachers are not adept at importing.

Robert

@asergay,

To use the native collapse/expand feature, but collapse them all if a specific one or some are not open might look something like the example below. However, if the teacher has chosen to expand them all on a specific course, you might want to store that as not to frustrate their workflow.

if(document.querySelectorAll('.collapsed_module').length == 0 && ['teacher', 'admin', 'root_admin'].some(a => ENV.current_user_roles.includes(a))) {
	document.getElementById('expand_collapse_all').click();
}

There is also ENV.COLLAPSED_MODULES array, which might be useful for someone.