Hide The SharePoint 2010 Ribbon/ How to hide the Quicklaunch in SharePoint

Hide The SharePoint 2010 Ribbon

There are several ways to hide the ribbon in SharePoint 2010. I think the easiest way is to use the javascript. This is just to use javascript to toggle the ribbon row’s display attribute on/off. The code example below uses the user id – ie it hides the ribbon if you are anonymous and displays it if you logged on. Great for internet sites, but not for intranets as generally everybody is logged on. So, I’d suggest just setting the code to switch the ribbon off by default and provide an anchor somewhere to toggle it back on. The off default is handy as it allows the SharePoint to code to correctly calculate the height of screen. You can put the script in an an external .js, directly into the master page, or in a content editor web part.

Code:

_spBodyOnLoadFunctionNames.push("setInitialDisplayModeByID('s4-ribbonrow')");

function setInitialDisplayModeByID(obj)
{
var el = document.getElementById(obj);
/* switch by anonymous or not */
if (typeof _spUserId == "undefined")
{
el.style.display = "none";
}
else
{
el.style.display = "";
}
}

A Very Basic Way of Toggling Ribbon Would Be:

JavaScript Code:

function toggleDisplayByID(obj)
{
var el = document.getElementById(obj);
if (el.style.display != "none")
{
el.style.display = "none";
}
else
{
el.style.display = "";
}
}

Insert link in your masterpage/on your page:
<
a href="javascript:toggleDisplayByID('s4-ribbonrow');">Toggle Ribbon< /a>

How to hide the Quicklaunch in SharePoint

If there are some pages you want to hide the quicklaunch to gain that little extra real estate, then there is a really simple fix.

Remember that when adding a Content Editor Web Part, you are able to add both CSS and javascript to the page.

So the simples way is simply to hide the Quicklaunch using CSS. Actually it hides the entire area the Quicklaunch is placed in, and gives you access to the whole areas width.

Simply add a Content Editor Web Part to the page and edit it with “Source Editor”.

Page the following:

<
style>

.ms-navframe
{
display: none;
}



You can also just hide the actual Quicklaunch if you want to place something else there:

<
style>
.ms-quickLaunch 
{
display: none;
}