SharePoint 2010 Hide Left Navigation

If you Google search the title of this blog post you will find numerous sites that tell you how to easily accomplish this via a simple CSS style change. Use a hidden content editor web part, just like my last post (except you don’t need jQuery), and add the following code:

<style>
BODY #s4-leftpanel { DISPLAY: none }
.s4-ca {MARGIN-LEFT: 0px }
</style>

Done. Simple. However, what if you want the ability to show and hide that on demand? Then you will need this handy JavaScript script code. Just like before, add a content editor web part to the page but this time don’t hide it. Add the following code and you will be able to show and hide the left navigation on demand:

<script language=”javascript”>
function toggle() {
var ele = document.getElementById(“s4-leftpanel”);
var s4 = document.getElementById(“MSO_ContentTable”);
var text = document.getElementById(“displayText”);
if(ele.style.display == “block”) {
ele.style.display = “none”;
s4.style.marginLeft = “0px”;
text.innerHTML = “show”;
}
else {
ele.style.display = “block”;
s4.style.marginLeft = “155px”;
text.innerHTML = “hide”;
}
}
</script>
<a id=”displayText” href=”javascript:toggle();”>Show</a> <== Click Here

Now you have two easy options for temporarily or permanently hiding the left navigation in SharePoint 2010.

There are a number of enhancements to this code that can be made to make it even more useful. The first is the bug that requires 2 clicks to get it working and the second would be setting the user’s selected preference in a cookie so that it always remembers the state that it was in the last time the user logged in. I may work on these in the future but feel free to post that code in the comments section or contact me directly and I will post an update or link to your blog!

Tim Ferro