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" />-->
.imgAlign- In your Custom master.css file, add the below CSS classes
{
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:
