I am trying to make SharePoint site quick launch to accordion using the below code. Everything works fine but when i click on the plus sign as shown in fig and then click on the sub menu item it takes to submenu page and the accordion is collapsing . I want the accordin not to collapse when i open the submenu item is with highlighting the clicked sub menu item. Please find the pictures and code.

enter image description here

<script type="text/ecmascript" src="/sites/Style Library/Jquery/jquery-1.4.2.min.js"></script>
<!--<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js">!-->

<script type="text/javascript">   
$(function($) {  
 //Hide all  
 $('.s4-ql li ul').hide();  
 //Set the Images up  
 var Collapse = "/_layouts/images/collapse.gif";  
 var Expand = "/_layouts/images/expand.gif";  

 //Find each top level UI and add reletive buttons & children numbers  

 $('.s4-ql ul li').find('ul').each(function(index) {  
 var $this = $(this);  
 $this.parent().find('a:first .menu-item-text').parent().parent().parent().prepend(['<a class=\'min\' style=\'float:right; margin-left:5px;margin-top:6px;margin-right:5px;\'><img src=\'/_layouts/images/expand.gif\'/></a>'].join(''));  
 //Setup Click Hanlder  
 $('.min').click(function() {  
 //Get Reference to img  
 var img = $(this).children();  
 //Traverse the DOM to find the child UL node  
 var subList = $(this).siblings('ul');  
 //Check the visibility of the item and set the image  
 var Visibility = subList.is(":visible")? img.attr('src',Expand) : img.attr('src',Collapse);;  
 //Toggle the UL  

enter image description here

1 Answer 1


As you are being redirected to different page, you could would run again and it would create accordion again. I would not able to help with exact code but below will give you idea. you would need to write code to identify current page being browsed and then expand the submenu item again by comparing url in sub menu item and window.location.pathname...Below is to give you idea on this

$('a[href="' + window.location.pathname + '"]');

Above will give you href with current url, now what you have to do it if you found any of this...apply logic to expand current li and show it selected one....

  • Hi Sidhharth thanks for suggestion. But I am not a pro in to jquery.could you please help me on this
    – SPLearner
    Aug 26, 2019 at 23:09
  • I cannot write whole logic until I see your page and HTML...not sure how more I would be able to help until I see your screen Aug 27, 2019 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.