How to: turn the left navigation in SharePoint into an accordion style one

Add this code to your master page. Add the Google JS to a local address if you don’t want to keep making remote calls. I’ve edited the code so that it will render on the page by changing:

  • “<" - "< "
  • “>” – ” >”

< type="text/javascript" src="http://www.google.com/jsapi">< /script >
< type="text/javascript">
// Load jQuery
google.load(“jquery”, “1.2.6”);
< /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 >