Scenario: You have a lot of headings with links under them that takes up a lot of room in the Quick Launch menu.

You can add a script to collapse all the headings in the Quick Launch.

Take a look at the images:

Image 1 Image2

Steps:

- Go to the page where you have the long Quick Launch Menu

- Under Site Actions click Edit Page

- Click Add a Web Part

- Under Miscellaneous select Content Editor Web Part

- Once the web part is added, click Edit them Modify Shared Web Part

- Click Source EditorCopy and Paste

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

- That’s it. Now you a collapsed Quick Launch Menu

| Reddit, googlereader, stumbleupon