Accordian menu in SharePoint 2010

There are several cases when we are required to customize left navigation's OOB behavior. In my resent project I was required to create accordion style menu so that it will fit in page resolution. I implemented this using Jquery.

See below simple implementation, below code refers directly to code.jquery.com latest available jquery file.  Alternatively you can download jquery file and upload it to sharepoint library and then refer it to implement Accordion style left navigation.

Just add below code in V4.master or Custom Master Page

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
    $("div.menu-vertical>ul.root>li.static>a").toggle(function ()   
    {
        $(">ul", $(this).parent()).show("fast");
    },
    function () {
    $(">ul", $(this).parent()).hide("fast");
    };
    $("div.menu-vertical>ul.root>li.static>ul.static").css("display","none");
    var s = $("div.menu-vertical>ul.root>li.static>ul.static>li.selected").parent();
    var p=s.parent();
    p.find('ul').css("display","");
    });
</script>

 

Use the ‘Comments’ form to share your thoughts.