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

Trackbacks Comments
  • Eman says:

    I would like to add a small tip to this very useful post.
    People who enjoy hiding the left pane usually would like to have it hidden by default and then be able to toggle, if needed.
    In this case, just add this to the code above, just before the function:
    document.onload=toggle();

    This will call the toggle function once the page is loaded and results in hiding the lef pane.
    My code was originally for SharePoint 2007, and goes as follows:

    document.onload=toggle();

    function toggle(flag)

    {
    var el = document.getElementById(“LeftNavigationAreaCell”);

    if ( el.style.display != ‘none’ )

    {

    el.style.display = ‘none’;
    }

    else

    {

    el.style.display = ”;
    }

    }

  • S Clark says:

    Tried in SharePoint 2013, but it bombs. I’ve tried to use with two methods.

    1. Saved as text file, put in Site Assets, and linked to it from a Content Editor Web Part.

    2. Added the code directly to a Script Editor Web Part.

    Both fail when I click Show.

    Idears?

Leave a Comment