Collapsible Quicklaunch Menu for SharePoint2010 Using Jquery

Recently I have been getting comments on my post Collapsible QuickLaunch SharePoint Menu For MOSS 2007/WSS 3.0 Using Jquery saying this is not working on SharePoint 2010 or is there any solution to get it working in SharePoint 2010. So here is the post that would describe how to achieve this in SharePoint 2010.

The way quick launch is rendered in SharePoint 2010 is different from MOSS 2007/WSS. SharePoint 2010 uses DIV/UL/LI for rendering menu tags compared to TR/TD in the previous versions. The image below shows how the menu is typically rendered in SharePoint 2010.

After doing some research I came to an approach of using Jquery to achieve this. Here is the article which is the base of this approach, so that you can use it to customize further if required. After implementing this how the collapsible quick launch looked.

But there was an issue with post back operation on click of each item on the navigation menu which resulted in losing the menu click item as expanded. To fix this issue I used cookies to maintain the expanded state of a menu item after post back which was posted as comment by Krillehbg on my previous post. The below snapshot show how it looks when you click Lists menu item.

Currently I will be posting the script which you can place it in master page later at some point of time I will make this as feature or someone could work on this to make it as feature.

1. Open the site in SharePoint Designer in which you want to make the QuickLaunch Collapsible.
2. Open the Master Page which resides in the catalog folder.
3. Copy and paste the given snippet above the end of head tag in the master page 

        <script type="text/javascript">
        $(document).ready(function () {


    $("body").addClass("enhanced");
    $(".root li:first").addClass("selected");
    $(".root li").not(":first").find("ul").hide();


    $(".root li.static").click(function () {        
        var menuClicked = createCookie("Menu_Clicked", $('a > span > span ', this).html(), 1);
        if ($(this).parent().find("ul").is(":hidden")) {
            $(".root ul:visible").slideUp("fast");
            $(".root li").removeClass("selected");
            $(this).parent().addClass("selected");
            $(this).find("ul").slideDown("fast");


        }
    });


    var menuClickedOld = readCookie("Menu_Clicked");
        $(".root li.static").each(function () {
        if ($('a > span > span ', this).html() == menuClickedOld) {
            if ($(this).parent().find("ul").is(":hidden")) {
                $(".root ul:visible").slideUp("fast");
                $(".root li").removeClass("selected");
                $(this).parent().addClass("selected");
                $(this).find("ul").slideDown("fast");


            }
            return;
        }
    });
});


function createCookie(name, value, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else var expires = ""; document.cookie = name + "=" + value + expires + "; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } function eraseCookie(name) { createCookie(name, "", -1); } function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}




function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}


function eraseCookie(name) {
    createCookie(name, "", -1);
}
        </script>

Happy Reading :). Please feel free to leave comments