0

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  
 subList.slideToggle();  
 });  
 });
</script>

enter image description here

0

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....

| improve this answer | |
  • Hi Sidhharth thanks for suggestion. But I am not a pro in to jquery.could you please help me on this – SPLearner Aug 26 '19 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 – Siddharth Vaghasia Aug 27 '19 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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