September 09, 2013

SharePoint 2010 Collapsible Left navigation for Production / accordion menu using jQuery / javascript

This is one of the basic needs if you have large number of list and libraries.
An accordion type left navigation or you can say it collapsible left navigation using Jquery or JavaScript.
As an initial step me too goggled to get ready code for production so got below these links, I guess you also have visited them.


For me things are not expected and up to the mark to make it live on production.
Here are few of points that made you to use my JavaScript code.
1) Wants a well formatted collapsible menu.

2) If any header don’t have sub header so no collapsible option should enable to that header.

3) User should able to click on header to redirect respective page (collapsible option shouldn’t apply on header text click event.

4) After user click any sub heading so header should be selected as well except that header other should be collapsed (for that we need to use cookies).

5) Only one header at a time should be open other should be collapsed.

6) Obviously It should be cross browser compatible and should be user friendly.

Now how make it.

1) Go to site and open it in SharePoint 210 designer.

2) Select Master Pages (v4.master), check out and open in advanced edit mode.

3) Go to head section of Master page append below JavaScript code

<script type="text/javascript" src="">
<script type="text/javascript">
  function setCookie(c_name,value,expdays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expdays);
    var c_value=escape(value) + ((expdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value+"; path=/";
  function getCookie(c_name) {
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1) c_start = c_value.indexOf(c_name + "=");
    if (c_start == -1) c_value = null;
    else {
      c_start = c_value.indexOf("=", c_start) + 1;
      var c_end = c_value.indexOf(";", c_start);
      if (c_end == -1){
        c_end = c_value.length;
      c_value = unescape(c_value.substring(c_start,c_end));
    return c_value;
  // starting main function
  $(function($) {
        //Hide all
  $('.s4-ql li ul').hide();
   var Expand = "/_layouts/images/plus.gif";
   var Collapse = "/_layouts/images/minus.gif"; 
  // Select saved Header from cookies
   var menuClickedOld1 = getCookie("HeaderName");

  // Adding margin to header those has no sub items.
  $('.s4-ql ul.root').find('li').each(function(index) {
  // Adding Anchor tag and img to headers
  $('.s4-ql ul li').find('ul').each(function(index) {
  var $this = $(this);

//// Cookkies set updates need to update in Prodcution.
  if($(this).parent().find('a:first .menu-item-text').parent().parent().text() == menuClickedOld1){
   $this.parent().find('a:first .menu-item-text').parent().parent().parent().prepend([''].join(''));
   $this.parent().find('a:first .menu-item-text').parent().parent().parent().prepend([''].join(''));
  //Setup Click Hanlder

   if(menuClickedOld1!=null && menuClickedOld1!=""){

  $('.s4-ql ul.root').find('li').each(function(index) {
  if($('li:contains('+menuClickedOld1+') ul').text() ==="Currently selected")

 $('li:contains('+menuClickedOld1+') ul').show();


  // Adding Bullets
   $(".s4-ql ul.root ul> li.static>a span span").prepend(' • ');

 // Set cookies to null if any header cliked that has no child.
  $(".s4-ql ul.root li a.static").click(function(){

  if($(this)[0].href.indexOf("_layouts") >0){


  $('.arrw').click(function() { 
   $(".s4-ql ul li a img").attr('src',Expand).attr('width','14');

   var v= $(this).parent().html();
   var lnName;
    lnName=$(v.slice(0,v.indexOf('<UL'))).find("span span").text();
    lnName=$(v.slice(0,v.indexOf("<ul"))).find("span span").text();

// Cookkies clear if collaps/clicked on same header click.

   var menuClickedOld1 = getCookie("HeaderName");
   if(menuClickedOld1 != null && menuClickedOld1 != "")
    if(menuClickedOld1 != lnName)
    if(menuClickedOld1 == lnName)

   //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 =":visible");

     $('.s4-ql li ul').hide();

4) Check in MasterPage and Publish it.

5) Now clear you’re all cookies and Temporary saved file in your browser hit your site.

Please share any issue or findings on this.

Praveen Pandit

No comments:

Post a Comment