cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
ewilhelm
Community Member

Auto-collapse course menu

Hello everyone, I would like to change the default state of the course menu to collapsed instead of expanded. I remember  @jperkins ​ mentioning that this was possible in his talk at Instructurecon, but I've not been able to find out how. I'm assuming this would be done with custom Javascript. Does anyone know how it works?

10 Replies
kona
Community Coach
Community Coach

Hopefully Jeremy will respond, but I'm also going to share this with the Canvas Developers​ group in the Community to see if they can help!

jperkins
Instructure
Instructure

Eva,

Sorry it took me so long to get this back to you. This code works, but it toggles the left menu closed on every page load. Not the most elegant solution, but it works reliably.

$( '#courseMenuToggle' ).ready(function() {

  jQuery(function() {

      jQuery('#courseMenuToggle').click();

  });

});

mlabbett
Community Participant

Jeremy, this looks promising.  However, I do not know where to put this code, can you elaborate or email me (mlabbett@tcsedsystem.edu).
Thanks!

Mark

James
Community Champion

mlabbett, you're bringing another conversation over into this one (I provided the link): https://community.canvaslms.com/ideas/8842-hide-course-navigation-menu . Be sure to read the comments there as well -- where you state that you want this for a single course. This solution, as well as the one I proposed there, as well as any solution is going to need to be implemented at the account or sub-account level, not at a course level.

But the answer of how to get custom JavaScript into your account is answered here: How do I upload custom JavaScript and CSS files to an account or sub-account? 

mlabbett
Community Participant

Thanks!  I was able to hide it by disabling everything in the Settings>Navigation tab.  However, because of the right side navigation information, such as "to-Do" and "Upcoming Assignments", that didn't work because it can navigate someone elsewhere and they cant get back to the main content if there is no left side course navigation.  So my next step is to try to hide the right side navigation in student view!  But that doesn't seem possible at the course level.

anthony_sales1
Community Participant

Tried the suggested solution - but didn't work. We have already hidden the navigation menus for students by disabling them all and just having links to the elements they need to have access to - so this is really for the teacher and course creators benefit to stop them continually having to hide the navigation bar every time they move to a new page - it really shoud just hide until your want to show it again - this is what happens in Moodle (3+) and other VLE's Online Platforms...

anthony_sales1
Community Participant

Have tried the code above and these two one liners below, as well as flushing the cache just in case and none of them work as advertised. Not sure if Canvas has changed something or I am doing something wrong..

Using jQuery

$('body').removeClass('course-menu-expanded');

Pure JavaScript

document.body.classList.remove('course-menu-expanded');

Has anyone got a working solution to this?

 @anthony_sales1  

There is a lot of conversation in https://community.canvaslms.com/ideas/8842-hide-course-navigation-menu" modifiedtitle="true" title="....  That thread is technically the answer to this question, so I am going to mark this assumed answered.  It's not possible as a feature of Canvas itself, but users have found a way to achieve this and submitted a feature idea!