Expanding and collapsing the left navigation in SharePoint 2010

In your left navigation you may want to hide pages/sub-sites because the navigation is long and expands the height of the page. Sure, you can tweak the left navigation under navigation settings but this may not be an option based on your portal rules.

Out of the box SharePoint navigation looks like figure 1.0.

 

Figure 1.0

We want the left navigation to look like figure 2.0 when the page loads. The items in the section “Marketing” are collapsed when the page loads and clicking “Marketing” will expand the section like figure 1.0

 

Figure 2.0

To implement the above feature we have the following requirements

1. Collapse the items under a section when the page loads
2. Expand a section when its header is clicked

We can use jQuery and custom data attributes in HTML 5 to expand and collapse the left navigation. It is important to understand the source HTML before we collapse a section on page load. Take a look at the figure 3.0 which shows the html source code for the Marketing section

 

Figure 3.0

The children are contained in a list item (li) element. Our JS code should hide all the children in a list item (li element) and it should also mark the section as hidden. We do that by writing the following JS code.

//Mark as hidden 
$('.s4-ql ul.root > li > a.menu-item').attr('data-hide', '1'); 
$('.s4-ql ul.root > li > span.menu-item').attr('data-hide', '1');

//Hide the children 
$('.s4-ql ul.root ul').hide();

The next step is to show the hidden items when a section is clicked. This can be achieved by the following JS code.

//Show/Hide when the heading is clicked. 
    $('.s4-ql ul.root > li > span.menu-item').bind('click', function (e) {

        var $this = $(this);

        toggleChildrenElems($this);

        e.preventDefault();
    });

    function toggleChildrenElems($this) {
        if ($this.attr('data-hide') == '1') {
            $this.next().show("slow");
            $this.attr('data-hide', '0');
            $this.attr('style', "background-image: url('/Style%20Library/Barclays/MENA/images/img_arrow_open.png');");
        }
        else {
            $this.next().hide("slow");
            $this.attr('data-hide', '1');
            $this.attr('style', "background-image: url('/Style%20Library/Barclays/MENA/images/img_arrow_closed.png');");
        }
    }

The above code also switches the closed and open arrow indicating whether a section is closed or open.

If you would like to expand the current section on page load then we have to match the URL of the current section with the URL in the address bar. This can be achieved by writing the following JS code

var url = window.location.toString().toLowerCase();

    $('.s4-ql ul.root > li > a.menu-item, .s4-ql ul.root > li > span.menu-item').each(function (index) {

        var $this = $(this);
        var thisURL = $this.attr('href');

        if(thisURL)
         thisURL = thisURL.toLowerCase();
        
        var menuExpanded = 0;

        if (url.indexOf(thisURL) != -1) {
            showChildren($this);
            menuExpanded = 1;
        }

        if (menuExpanded == 0) {
            $this.next().find('li > a').each(function (j) {

                var childURL = $(this).attr('href');
                
                if(childURL)
                 childURL = childURL.toLowerCase();
                
                if (url.indexOf(childURL) != -1) {
                    showChildren($this);
                    menuExpanded = 1;
                }

            });
        }

    });

Click here to download the entire JS file.

Reference:

http://www.synergyonline.com/Blog/Lists/Posts/Post.aspx?ID=157