HOW TO (elegantly) Hide & Show SharePoint's Quicklaunch panel…

Here’s a cool trick that I’ve done for several clients in the past, and each time I find cleaner & cleaner ways to do it.

A lot of time SharePoint’s QuickLaunch (left navigation panel) simply takes up too much space, and everyone looks for “elegant” ways to toggle hiding/showing it.

Here’s the BEST solution I’ve come up with so far:

STARTING with a PAGE-LEVEL version of the solution (later yyou can make this global by moving the code to your master pages), put the following code in a Content Editor web part, and place whatever 2 “show” and “hide” button images in the appropriate picture library:

<xmp>

<script type=”text/javascript”>
function HideQuickLaunch(){
document.getElementById(‘LeftNavigationAreaCell’).style.display=’none’
document.getElementById(‘HideQuickLaunchButton’).style.left=0;
document.getElementById(‘HideQuickLaunchButton’).style.top=150;
document.getElementById(‘ShowQuickLaunchButton’).style.left=25;
document.getElementById(‘ShowQuickLaunchButton’).style.top=150;
}

function ShowQuickLaunch(){
document.getElementById(‘LeftNavigationAreaCell’).style.display=’block’
document.getElementById(‘HideQuickLaunchButton’).style.left=0;
document.getElementById(‘HideQuickLaunchButton’).style.top=150;
document.getElementById(‘ShowQuickLaunchButton’).style.left=25;
document.getElementById(‘ShowQuickLaunchButton’).style.top=150;
}
</script>

<IMG
id=”HideQuickLaunchButton”
src=”http://portal.pondscum.com/TSA/CSA%20Pictures/HideQuickLaunchButton.gif&#8221;
style=”position: absolute; left: 0; top: 150;”
OnClick=”HideQuickLaunch();”/>

<IMG
id=”ShowQuickLaunchButton”
src=”http://portal.pondscum.com/TSA/CSA%20Pictures/ShowQuickLaunchButton.gif&#8221;
style=”position: absolute; left: 25; top: 150;”
OnClick=”ShowQuickLaunch();”/>

</xmp>

Advertisements
This entry was posted in Sharepoint Tips. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s