Create-an-Accordion-Navigation-for-SharePoint-2010-using-jQuery

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).

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript">

jQuery(function($) {
//Hide all
$('.s4-ql li ul').hide();
//Set the Images up
var Collapse = "http://POLA:33/sites/SHIVAPRASAD/Pic%20Lib/minus_square_black.png";
var Expand = "http://POLA:33/sites/SHIVAPRASAD/Pic%20Lib/plus_square_black.png";
//Find each top level UI and add reletive buttons & children numbers
$('.s4-ql ul li').find('ul').each(function(index) {
var $this = $(this);
$this.parent().find('a:first .menu-item-text').parent().parent().parent().prepend(['<a class=\'min\' style=\'float:right; margin-left:5px;margin-top:6px;margin-right:5px;\'><img src=\'http://geoshieldsp2:1001/sites/RaviTestingSite/Pic%20Lib/plus_square_black.png\'/></a>'].join(''));
});
//Setup Click Hanlder
$('.min').click(function() {
//Get Reference to img
var img = $(this).children();
//Traverse the DOM to find the child UL node
var subList = $(this).siblings('ul');
//Check the visibility of the item and set the image
var Visibility = subList.is(":visible")? img.attr('src',Expand) : img.attr('src',Collapse);;
//Toggle the UL
subList.slideToggle();
});
});

</script>

The result (closed):

The result (opened):

















Result selected:

Hope it will help you out.

Cheers SharePoint