Follow the below mentioned steps to make the Quick Launch expand/collapse:
1. Edit the Sharepoint site Master page ( Right click on Master page --> Send To --> Download a copy)
2. Copy the below mentioned script code to the master page under the <body> tag:
<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/plus.gif";
//set img path for when submenu is visible
var openedImg = "/_layouts/images/minus.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>
3. Upload the master page, checkin and approve it.
4. Now the quick launch on the Sharepoint site will be collapsed.
Feel free to let me know if you face any issue.
