Updated: August 10 2011: SharePoint 2010 Collapsible Quick Launch
I am sure most of SharePoint Developers have started to use Jquery in SharePoint. In this post I am going to talk about how we can use JQUERY to make a collapsible QUICKLAUNCH MENU. Many organizations may have come across this scenario where you have a very long list of links on the QuickLaunch Menu and would love to have collapsible Headers for QuickLaunch. Hope this post will be a stop for your search.
1. Open the site in SharePoint Designer in which you want to make the QuickLaunch Collapsible.
2. Open the Master Page which resides in the catalog folder.
3. Copy and paste the given snippet above the end of head tag in the master page
4. Save and close master page changes
5. The QuickLaunch should look like this given below
Note: Hope you have internet connection for your development machine or else you may have needed to download the JQUERY scripts locally and add the references accordingly.
I am sure most of SharePoint Developers have started to use Jquery in SharePoint. In this post I am going to talk about how we can use JQUERY to make a collapsible QUICKLAUNCH MENU. Many organizations may have come across this scenario where you have a very long list of links on the QuickLaunch Menu and would love to have collapsible Headers for QuickLaunch. Hope this post will be a stop for your search.
1. Open the site in SharePoint Designer in which you want to make the QuickLaunch Collapsible.
2. Open the Master Page which resides in the catalog folder.
3. Copy and paste the given snippet above the end of head tag in the master page
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1.2.6");
</script>
<script type="text/javascript">
$(function(){
//initialize menus
var menuRows = $("[id$='QuickLaunchMenu'] > tbody > tr");
var menuHd = menuRows.filter("[id!='']:has(+tr[id=''])");
//set img path for when submenu is hidden
var closedImg = "/_layouts/images/Menu1.gif";
//set img path for when submenu is visible
var openedImg = "/_layouts/images/ptclose.gif";
var cssInit = {
"background-image": "url('"+closedImg+"')",
"background-repeat": "no-repeat",
"background-position": "100% 50%"
}
var cssClosed = {"background-image": "url('"+closedImg+"')"}
var cssOpen = {"background-image": "url('"+openedImg+"')"}
//hide submenus
menuRows.filter("[id='']").hide();
//apply initial inline style to menu headers
menuHd.find("td:last").css(cssInit);
menuHd.click(function () {
var styleElm = $(this).find("td:last")
var nextTR = $(this).next("tr[id='']");
if (nextTR.is(':visible')) {
nextTR.hide();
styleElm.css(cssClosed);
} else {
nextTR.show();
styleElm.css(cssOpen);
}
});
});
</script>4. Save and close master page changes
5. The QuickLaunch should look like this given below
Note: Hope you have internet connection for your development machine or else you may have needed to download the JQUERY scripts locally and add the references accordingly. 
