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: