Accordion-Style Left Navigation using JQuery

Accordion-Style Left Navigation:
Before
All the Quick link menu provided by sharepoint out of Box has a fixed format and altering its CSS alters is branding.
However we can achieve collapsing and expanding functionality using jQuery provided by Google’s API.

if you want the accordion-style menu for all pages, you should work it into the default.master. For now, i have carried by adding a Content Editor Web Part (CEWP) to the page. Add the code below to the web part’s Content Editor (source). Now your menu should look like this.
Here when you click on the menu header box with the down arrow image, it exposes the submenu below it and swaps the image with an ‘x’. Likewise, clicking the header with the ‘x’ will hide the associated submenu.

<--script-->
<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);
}
});
});