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.
2 | var topLevelLinks = $("div[id$='QuickLaunchMenu'] > ul > li:has('ul') > a"); |
5 | 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>"); |
8 | topLevelLinks.closest("li").find("> ul").hide(); |
11 | topLevelLinks.click(function(e) { |
17 | var childUl = $(this).closest("li").find("> ul"); |
18 | var isVisible = childUl.is(":visible") |
24 | $(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>"); |
31 | $(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>"); |
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.