Tuesday, June 3, 2014

Quick Launch Accordion with arrow in SharePoint 2013

Modifying the master page

  • On the head tag of master page html add below lines
<!--SPM:<SharePoint:ScriptLink Name="~sitecollection/Style Library/jquery.js" runat="server"/>-->
<!--SPM:<SharePoint:ScriptLink Name="~sitecollection/Style Library/master.js" runat="server"/>-->

  • Add a link to Custom Css in master page.
  • On the head tag of master page html add below highlight lines
<!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->

<!--SPM:<SharePoint:CssRegistration Name="https://portal.sharepoint.com/Style Library/Master.css" runat="server" After="corev15.css" />-->

  • In your Custom master.css file, add the below CSS classes
.imgAlign
 {
 padding-right:5px;
 padding-top:5px;
 padding-bottom:3px;

 }

Modify the javascript file

  • On the master.js file add the below code.

jQuery(function($){  
  jQuery('.ms-core-listMenu-verticalBox ul.root > li > a').each(function ()  
  {  
     jChildren = jQuery(this).next('ul');  
     if(jChildren.length!=0)  
     {  
        $(this).find("span.menu-item-text").prepend("<img src='/Style Library/PMO/plusArrow.png' border='0' class='imgAlign' />");  
     }  
  });  
  var jChildrens = jQuery('.ms-core-listMenu-verticalBox ul.root ul');  
   //Expand Active Parent node  
   var selectedIndex = -1;  
   for(var i=0; i < jChildrens.length; i++) {  
     jChidlren = jQuery(jChildrens[i]);  
     if(jChidlren.find('li.selected').length > 0) {  
       selectedIndex = i;  
       break;  
     }  
   }  
   jChildrens.hide();  
   if(selectedIndex!=-1)  
   {  
    jChildrens.eq(selectedIndex).parent("li").find("img.imgAlign").attr("src","/Style Library/PMO/minusArrow.png");  
    jChildrens.eq(selectedIndex).slideDown();  
   }  
   //Parents  
   jQuery('.ms-core-listMenu-verticalBox ul.root > li > a').click(function (e) {  
     jChildren = jQuery(this).next('ul');  
     if(jChildren.length!=0)  
     {  
      e.preventDefault();  
      $(this).find("img.imgAlign").attr("src","/Style Library/PMO/plusArrow.png");  
      jChildrens.slideUp();  
      if (jChildren.is(':visible') == false)  
      {  
      $(this).find("img.imgAlign").attr("src","/Style Library/PMO/minusArrow.png");  
        jChildren.slideDown();  
      }  
     }  
   });  
 });  

Arrow Images



Expanded




Collapsed:


















20 comments:

  1. Hello. Thanks for your code. I'm finding that the last menu choice is always highlighted. How can I fix that? Thanks.

    ReplyDelete
    Replies
    1. @Akash Karda do you have a solution to this problem?

      Delete
  2. I do have the same question. Is there a solution for that?

    Thanks

    ReplyDelete
    Replies
    1. You should add a correct link and it will works

      Delete
  3. In the above example, Is site content is always highlighted?

    ReplyDelete
  4. Great script! Would it be possible to make it work in Chrome and Firefox too?

    ReplyDelete
  5. Arrows wont work for some reason. They are showing as broken images with the message :

    The image “https://cloudsites.xxxx.com/Style%20Library/PMO/plusArrow.png” cannot be displayed because it contains errors.

    ReplyDelete
  6. Can you make sure you checked in the images and the image path is correct?

    ReplyDelete
    Replies
    1. Hey Akash I verified they were in the right place. I created a folder in Style Library via Sharepoint designer named PMO and dropped the plusArrow.png directly there.

      Delete
  7. Finally have it working. Is there anyway to create a second accordion menu under an accordion?

    ReplyDelete
  8. Code works but when I click on any link it collapses.. How make it expanded even after clicking the link ?

    ReplyDelete
  9. Hey there. Question. How can we keep the first list item expanded at all times and would it be possible to add a third level navigation?

    ReplyDelete
  10. Thanks you for this job , Can use it in SharePoint Online?

    ReplyDelete
  11. Yes, you can use this in SharePoint Online.

    ReplyDelete
  12. Yes.....is Work fine you are the kingggggg of Jquery...

    ReplyDelete
  13. I am not sure from where to get code of jquery.js. It is not there in the style library.

    ReplyDelete
  14. I used the same thing but I am not able to change the quick launch

    ReplyDelete
  15. I am using office 365 I tried all the steps above but couldn't change any thing. please help me

    ReplyDelete
  16. is there any specific place to add that reference tag into master pages or can you please tell me master page name and location how i can add that tag into master page.

    ReplyDelete
  17. This comment has been removed by a blog administrator.

    ReplyDelete