How to do an accordion effect to quick launch menu with jQuery in Sharepoint 2010

This is the code I used to do an accordion effect to the quick launch menu in Sharepoint designer with jQuery. Also, you have to put this code in your Portal Master Page in order to see the changes applied. In my case, I have a separate Javascript file where all custom functionality is concentrated.

CSS code:


.imgAlign
 {
 padding-right:9px;
 padding-top:6px;
 padding-bottom:3px;
 }
.imgTrnspAlign
 {
 padding-right:10px;
 }

jQuery Code:

$(document).ready(function ()
{

    // Put the arrow images for the elements with children. 
    $("div.menu-vertical>ul.root>li.static>a").each(function ()
    {
        var hasChild = $(">ul", $(this).parent()).html();

        if (hasChild != null)
        {
            $(this).find("span.menu-item-text").prepend("<img src='../Images/plusArrow.png' border='0' class='imgAlign' />");
        
        } else {
        
             $(this).find("span.menu-item-text").prepend("<img src='../Images/transparentArrow.png' border='0' class='imgTrnspAlign' />");


        
        }

    });


    // This function activates the arrow functionality to toggle the submenu elements. The header (father item) is a link it self. You may be want to consult this link, so the functionality is only for the arrow image.

    $("img.imgAlign").toggle(

    function ()
    {
        $("img.imgAlign").attr('src', '../Images/plusArrow.png');
        $(this).attr('src', '/_layouts/AGCOCorpBranding/Portal.master/Images/minusArrow.png');
        if ($(this).parent().parent().parent().parent().html().indexOf('none') &gt; -1)
        {
            $("div.menu-vertical&gt;ul.root&gt;li.static&gt;ul.static").css("display", "none");
            $("&gt;ul", $(this).parent().parent().parent().parent()).show("fast");
            $(this).attr('src', '../Images/minusArrow.png');
        }
        else
        {
            $("div.menu-vertical&gt;ul.root&gt;li.static&gt;ul.static").css("display", "none");
            $("&gt;ul", $(this).parent().parent().parent().parent()).hide("fast");
            $(this).attr('src', '../Images/plusArrow.png');
        }
    }, function ()
    {
        if ($(this).parent().parent().parent().parent().html().indexOf('none') &gt; -1)
        {
            $("div.menu-vertical&gt;ul.root&gt;li.static&gt;ul.static").css("display", "none");
            $("&gt;ul", $(this).parent().parent().parent().parent()).show("fast");
            $(this).attr('src', '../Images/minusArrow.png');
        }
        else
        {
            $("div.menu-vertical&gt;ul.root&gt;li.static&gt;ul.static").css("display", "none");
            $("&gt;ul", $(this).parent().parent().parent().parent()).hide("fast");
            $(this).attr('src', '../Images/plusArrow.png');
        }
    });
    
    
    
   
    
     $("div.menu-vertical&gt;ul.root&gt;li.static&gt;ul.static").css("display", "none");
 
    var s = $("div.menu-vertical&gt;ul.root&gt;li.static&gt;ul.static&gt;li.selected").parent();
    var p = s.parent();
    var img = p.find('img');
    img.attr('src', '../Images/plusArrow.png');
    p.find('ul').css("display", "none");
 
   
   // When you are in a child link page the menu is still showing with the child element highlighted.

     if ( $("div.menu-vertical&gt;ul.root&gt;li.static&gt;ul.static").children().hasClass("selected")) {
           $("div.menu-vertical&gt;ul.root&gt;li.static&gt;ul.static li.selected").parent().css("display",""); 
        img.attr('src', '../Images/minusArrow.png');
 

    } else {
    
        $("div.menu-vertical&gt;ul.root&gt;li.static&gt;ul.static").css("display", "none");
    
    }

    

});
   

These are the images files I used in this implementation:
transparentArrow.png
plusarrow.png
minusarrow.png

References and credits:

Advertisements

One thought on “How to do an accordion effect to quick launch menu with jQuery in Sharepoint 2010

  1. Hello, I am trying to use this code on my SP2010 MasterPage but I cannot get it to work. For some reason the jquery code is not firing off at all. Is there a specifc place on the page that the jquery code needs to be or should it work within a script tag in the head section work?

    it’s as if the $(document).ready(fuction() gets skipped over because even if I place an alert(“ready”); line just to see if it gets to it it doesn’t.

    help!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s