Monday, May 16, 2011

Hide and Show the SharePoint 2010 Ribbon

If your SharePoint site users are fed up with Ribbon, because most of times SharePoint 2010 Ribbon takes space at top of site.
Ribbon is mostly used by Administrator or Editors, those are very few in count as compare to readers.
Users who have read permission they don't require Ribbon most of times

Following code will Show and Hide the SharePoint 2010 site Ribbon on clicking on buttons. You can write your own code that will automatically Show/Hide the Ribbon.
You can add following code in Master page.


<script type="text/javascript" src=""></script>
<script type="text/javascript">
            function ShowRibbon() {
                $('#s4-workspace').height($(document).height() - $('#s4-ribbonrow').height() * 2);
            function HideRibbon() {
                var newHeight = $(document).height();
                if ($.browser.msie) { newHeight = newHeight - 3; }
<input id="Button1" type="button" value="ShowRibbon" onclick="ShowRibbon()" />
<input id="Button12" type="button" value="HideRibbon" onclick="HideRibbon()" />



  1. I want to create four tab ribbon for a content/publishing page in Sandbox solution.I created the structure of ribbon but i don't get any solution to show my ribbon on a particular page.Can you suggest me that how can i show my ribbon on a page in sandbox environment because sandbox have own limitation you know so i can't use web part,user control etc.

  2. Thanks for the great article. How do you make sure the ribbon stays hidden or showing until the other button is hit. Both functions work but the minute I navigate to another site the ribbon shows again.

  3. Hi Kippster,
    As you want to hide ribbon on page load, add following code in master page.

    $(document).ready(function () {
    HideRibbon(); // Call to HideRibbon function on Page Load