EDIT
I improved the answer and created a blog post about it here.
I followed this post in order to add the jQuery accordion functionality to the Quick Launch in SharePoint.
While the code in the above link applies to SharePoint 2007, I somewhat managed to change it so that it should now work with SharePoint 2013.
Here's the code that I currently have:
///<reference path="jquery-1.2.6-vsdoc.js"/>
function initQuickLaunch() {
// For each Quick Launch navigation link (sub menu):
$("ul#zz16_RootAspMenu>li.static>ul.static>li.static>a.static").each(function(){
// Find any navigation items under the sub menu that have been selected.
var selectedNavItems = $(this).find("a.selected");
// Find the corresponding heading of the current sub menu being processed
var menuHeader = $(this).parents("a:eq(0)").prev("a").find("ul#zz16_RootAspMenu>li.static>a.static:eq(0)");
if ($(menuHeader).hasClass("selected") || selectedNavItems.length > 0)
{
// If the navigation header for this sub menu is selected or if there are any
// selected navigational items in this submenu, show the submenu.
$(this).show();
// alert('Show submenu');
}
else
{
// otherwise, hide the submenu
$(this).hide();
// alert('Hide submenu');
}
});
// When a user clicks a navigation heading, the user should be taken directly
// to the corresponding page of that subsite. The javascript event handler to
// hide/display the submenus should not be triggered.
$("ul#zz16_RootAspMenu>li.static>a.static").click(function(e) {
e.stopPropagation();
// alert('User clicked on navigation header');
});
// When the user hovers over the navigation heading, it would be nice
// to have an indicator that they can click on the heading. Usually,
// browsers use the hand icon to indicate clickable items.
$("ul#zz16_RootAspMenu>li.static>a.static").hover(function(e){
$(this).css("cursor", "hand");
}, function(e){
$(this).css("cursor", "default");
});
//Finally, this adds a click event handler for the navigation heading
$("ul#zz16_RootAspMenu>li.static>a.static").click(function(e) {
var subMenu = $(this).parents("a:eq(0)").next("a").find("ul#zz16_RootAspMenu>li.static>ul.static>li.static>a.static:eq(0)");
// alert(subMenu.length);
if (subMenu.length > 0)
{
//only if we have a submenu should we hide the other submenus and show the current one.
$("ul#zz16_RootAspMenu>li.static>ul.static>li.static>a.static").hide("slow");
subMenu.show("slow");
}
});
};
Currently the above code can hide all the navigation links under each heading in the Quick Launch upon load, but the problem I have is: when you click on a certain heading, it does not show the corresponding navigation links. It just follows the url behind that heading and goes to that subsite. And when it is on the subsite, it should normally show all the navigation links underneath that subsite as well, but this doesn't work either.
You may see some alerts in comment here and there, I just added those to see which part of the code gets executed when I test it out.
I would really appreciate it if someone would take a look at this, I'm sure I'm just looking over something small, I just can't figure out what.
Steps to reproduce:
1) Copy the above code and paste it in a new file named "accordion.js"
2) Add a reference to this file in your master page (see code below for my reference)
<script src="/Style Library/Intranet/scripts/accordion.js" type="text/javascript"></script>
3) Change the body tag on the master page (see code below)
<body onload="initQuickLaunch()">
4) Test it out on a site that uses that master page
Thanks for your time!