Accordion-Style Left Navigation Using jQuery and CSS in SharePoint 2010

Introduction

All the Quick Link menus provided by SharePoint2010 out of the box have a fixed format and altering its CSS alters its branding. Implementing collapsible headings in the quick launch for SharePoint 2010 (jQuery UI accordion effect) would solve this issue. All the solutions that I've seen are for sites and sub sites. In the site navigation settings, I have entered a heading with links to site pages under it.

My current navigation works fine. For example if a category is open it will remain open until the category is clicked on. I implement an accordion on SharePoint current navigation.

However we can do collapsing and expanding functionality using:

  • jQuery
  • CSS 
jQuery

If you want the accordion-style menu for all pages, you should work it into the v4.master.

You need to add the following code into the v4.master.

To edit, open the v4.master in SharePoint Designer 2010, share this piece of code to obtain an accordion style quick launch in SharePoint 2010.
  1. <script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.7.1.min.js">  
  2.    
  3. <script type="text/javascript">   
  4. $(function($) {  
  5.  //Hide all  
  6.  $('.s4-ql li ul').hide();  
  7.  //Set the Images up  
  8.  var Collapse = "/_layouts/images/collapse.gif";  
  9.  var Expand = "/_layouts/images/expand.gif";  
  10.   
  11.  //Find each top level UI and add reletive buttons & children numbers  
  12.   
  13.  $('.s4-ql ul li').find('ul').each(function(index) {  
  14.  var $this = $(this);  
  15.  $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(''));  
  16.  });  
  17.  //Setup Click Hanlder  
  18.  $('.min').click(function() {  
  19.  //Get Reference to img  
  20.  var img = $(this).children();  
  21.  //Traverse the DOM to find the child UL node  
  22.  var subList = $(this).siblings('ul');  
  23.  //Check the visibility of the item and set the image  
  24.  var Visibility = subList.is(":visible")? img.attr('src',Expand) : img.attr('src',Collapse);;  
  25.  //Toggle the UL  
  26.  subList.slideToggle();  
  27.  });  
  28.  });  
  29. </script>  
sharepoint home page

CSS

It is possible to do it with pure CSS. When it comes to SharePoint there is only one caveat; you can create a CSS with only an accordion menu as long as the accordion effect fires on hover and not when the navigation header is clicked.

Add the following CSS into the v4.master:

To edit, open the v4.master in SharePoint Designer 2010.
  1. <style>  
  2.         .s4-ql li.static 
  3.         {  
  4.             height2em;  
  5.             overflowhidden;  
  6.         }  
  7.   
  8.         .s4-ql li.static:hover 
  9.         {  
  10.             heightauto;  
  11.         }  
  12.   
  13.         .s4-ql li > span.menu-item 
  14.         {  
  15.             cursorpointer;  
  16.         }  
  17.         /* Format the headers */  
  18.         .s4-ql li > span.menu-item 
  19.         {  
  20.             cursorpointer;  
  21.             background#0171C6;  
  22.             colorwhite;  
  23.             bordersolid #fff;  
  24.             border-width1px 0;  
  25.         }  
  26.         /* Format the accordion list items */  
  27.         .s4-ql a.menu-item 
  28.         {  
  29.             color#000;  
  30.             background#C9D4FF;  
  31.             border1px solid #97C8F7;  
  32.             border-bottomnone;  
  33.         }  
  34.         /* Format the header hover, list item hover and currently selected item */  
  35.         .s4-ql li > span.menu-item:hover, /*Header */  
  36.         .s4-ql a.selected, /* Selected */  
  37.         .s4-ql a.menu-item:hover /* List item */ 
  38.         {  
  39.             color#FFF;  
  40.             background#073D7D;  
  41.         }  
  42.   
  43.         .s4-ql ul.root > li.static
  44.         {  
  45.             max-height2em;  
  46.             overflowhidden;  
  47.             transition: max-height 1s linear;  
  48.         }  
  49.   
  50.        .s4-ql ul.root > li.static:hover 
  51.        {  
  52.             max-height500px;  
  53.        }  
  54.     </style>  
category option in sharepoint

Summary

As described in this article, there are two ways to implement an accordion in SharePoint 2010 (Current Left Navigation).

 

Up Next
    Ebook Download
    View all
    Learn
    View all