SharePoint Branding: add a handy function to allow users show/hide quick launch bar

Few days ago I was working with SharePoint Project Server 2010, and with the main page of the project site, which is now in SharePoint.
One really nice feature in Project Server site is to allow users to collapse and expand quick launch to maximize the main area of the site.
The effect is something like this.
This is the look of the site with expanded quick launch:

This is the look with collapsed quick launch:

In fact you can do exactly the same with your team site template, which your users might find really handy.
In here I will make use of the JavaScript library which comes with Project Server 2010 installed – which means, if you don’t have it installed – you will get a JavaScript error if you just follow exact instructions here. Follow the instructions here if you want to use this feature in SharePoint Foundation or Standard without Project Server installed.
Let’s get started. We will be modifying default masterpage in this example to quickly demonstrate the approach. if you’re implementing this in your production environment it’s best to create a copy of the masterpage rather than modify existing one.
1. Open SharePoint Designer 2010 and select your team site, in my case http://intranet.contoso.com
2. Click Masterpages in the left panel of SPD under Site Objects.
3. Select v4.master and check it out. Open the file for editing.
4. Locate the following line of code:

<div id="s4-leftpanel-content">

and add below right after it:

<a onclick="Shell_ExpandCollapseQuickLaunch(); return false;" href="#">
<img id="LeftPaneCollapseImg" style="padding-left: 8px;
padding-right: 8px;" src="/_layouts/images/mewa_left.gif" border="0"/>
</a>

This will take care of the collapsing the quick launch
5. Locate the following line of code:

<a name="mainContent"></a>

and add below right after it:

<a onclick="Shell_ExpandCollapseQuickLaunch(); return false;" href="#">
<img id="LeftPaneExpandImg" style="display: none;"
src="/_layouts/images/mewa_right.gif" border="0"/>
</a>

This will take care of getting the quick launch back once it’s hidden.
6. Now let’s add the reference to the JavaScript file which will do all the work. Remember – you will have this file only if you have installed Project Server service application, we will see how you can achieve the same result using open source tools in my next article.
In your masterpage opened in SharePoint Designer, go to the very top, and right before the </head> tag add:

<script type="text/javascript" src="/_layouts/inc/pwa/library/shell.js"></script>

7. Save the masterpage in SharePoint Designer and refresh the page on your team site, in my case http://intranet.contoso.com you will see a small arrow just like on the project site allowing you to collapse and expand the quick launch.
Enjoy!