Simple Expand/Collapse for the Quick Launch in SharePoint 2013 or SharePoint Online
Yesterday I helped my pal Marcel Meth (@marcelmeth) with a pretty simple little task, but everything’s simple if you know how to do it! We needed to add simple accordion-like expand/collapse functionality to the Quick Launch on the pages in a Site Collection. Because there were going to be a lot of links in the Quick Launch (mostly links to different views of lists), it was getting pretty cumbersome to wade through. By adding this expand/collapse capability, we could improve the user experience (UX). It’s little stuff like this that makes SharePoint usable. Never underestimate the power of a small tweak like this.
This code works on a Team Site on SharePoint Online in Office365 with its Quick Launch exposed in the normal way. Any other customization you have in place may interfere with this working. (Yadda, yadda, disclaimer, YMMV, etc.) I’m sure it will work for you – possibly with some tweaks – in any SharePoint 2013 or SharePoint Online site. You can add this script to a single page or to the master page if you’d like it to work on all pages in the Site Collection.
// Find all the top level links in the Quick Launch that have children var topLevelLinks = $("div[id$='QuickLaunchMenu'] > ul > li:has('ul') > a"); // Prepend the little "twiddle" icon to each top level link topLevelLinks.prepend("<span class='ms-commentexpand-iconouter ql-icon'><img alt='expand' src='/Comm/Comms2/_themes/1/spcommon-B35BB0A9.themedpng?ctag=2' class='ms-commentexpand-icon'></span>"); // We're starting with all of the sections collapsed. If you want them expanded, comment this out. topLevelLinks.closest("li").find("> ul").hide(); // Set up for the click even of on the top level links topLevelLinks.click(function(e) { // We're going to stop the default behavior e.preventDefault(); // Find the elements we need to work with var childUl = $(this).closest("li").find("> ul"); var isVisible = childUl.is(":visible") // If the section is visible, hide it, and vice versa if(isVisible) { // Replace the icon with its antitheses $(this).find(".ql-icon").replaceWith("<span class='ms-commentexpand-iconouter ql-icon'><img alt='Expand' src='/Comm/Comms2/_themes/1/spcommon-B35BB0A9.themedpng?ctag=2' class='ms-commentexpand-icon'></span>"); // Hide the child links by sliding up. Note: You could change the effect here. childUl.slideUp(); } else { // Replace the icon with its antitheses $(this).find(".ql-icon").replaceWith("<span class='ms-commentcollapse-iconouter ql-icon'><img alt='Collapse' src='/Comm/Comms2/_themes/1/spcommon-B35BB0A9.themedpng?ctag=2' class='ms-commentcollapse-icon'></span>"); // Show the child links by sliding down. Note: You could change the effect here. childUl.slideDown(); } });
hey: i am noticing that if i have the prevent default event active, when a user goes to click on any of the li in the submenu, they do not work.
@D:
As with any post like this, YMMV. You may need to tweak this to meet your needs or due to changes in the underlying DOM.
M.
Can you attach a screen shot for this solution? I am seeking a solution for a team site and believe this might work. Thank you!
@tianaranjo:
I’d suggest you just try it to see if it does what you need. A screenshot would just show the Quick Launch missing!
M.
Hi Marc, where do i insert the code on a Modern SharePoint page?
You can’t do this in a modern page. We no longer can add JavaScript into pages.
M.
Newbie question, working on company sharepoint site.
How do I do this (ie webpart, or other) I am exploring all options
but don’t have full sharepoint admin right, but admin to the site I created. can you include a quick step instruction outline. I do alot of coding, but just now getting back into Sharepoint, and its changed alot!
@Warren:
This is quite an old post. This was possible back when we could put JavaScript into pages with the Content Editor Web Part (CEWP). If you’re in modern SharePoint, this is no longer possible. If you’re in classic mode, you can still do it. You don’t say which version you’re working with, so I’m not sure.
M.