Monday, October 15, 2012

QUICK TIP – JQUERY COLLAPSABLE QUICKLAUNCH FOR SHAREPOINT 2010


Enable an end user to hide the Quicklaunch from view and free up some additional space if you have a lower resolution. download jquery-1.6.2.min.js and copy this snippets on Master page.

<script type="text/javascript" src="/Shared%20Documents/jquery-1.6.2.min.js"></script>

<script type="text/javascript">
jQuery(function($) {
        var CookieName = "QuickLaunchHidden";
   var MainArea = $('.s4-ca');
   var MainAreaLeftMargin = $(MainArea).css('margin-left');
   var NoLeftMargin = "0px";
   var LeftArea = $('#s4-leftpanel');
   var Collapse = "/_layouts/images/mewa_leftPage.gif";
   var Expand = "/_layouts/images/mewa_rightPage.gif";

   $(MainArea).prepend('<a class=\'min\' style=\'float:left; position:absolute; top:0px; left:0px;\' title=\'Hide \\ Show Quick Launch\'><img src=\''+

Collapse +'\'/></a>');

   $('.min').click(function(){
//Toggle the Left Panel to hide it
$(LeftArea).toggle();
$(LeftArea).is(":visible") ? MainArea.css('margin-left',MainAreaLeftMargin ) :  MainArea.css('margin-left',NoLeftMargin);
var img = $(this).children();
$(LeftArea).is(":visible") ? img.attr('src',Collapse) : img.attr('src',Expand );
});
});
</script>
For more information:
http://www.lifeinsharepoint.co.uk/2012/06/19/quick-tip-jquery-collapsable-quicklaunch-sharepoint-2010/