Hide inactive buttons and tabs on the ribbon in sharePoint 2010 via jquery

First time when I was working with SharePoint 2010, I was amazed about the new look and feel. In a negative sense, that is!

Everyone was feeling so happy and joyful about it, and I just couldn’t get it.
We went from a clean look in SharePoint 2007, where all my options are hidden underneath 4 buttons (new / upload / actions / settings which makes it very easy to use. It even looks very minimal and clean.

Enter SharePoint 2010: a big ribbon filled with huge buttons all over the place, divided into tabs who have non-meaningful names. And when I am not an administrator, a lot of these buttons are now disabled, but still visible!

In my opinion, a setback in the user-friendly UI that SharePoint had. I had classes of people who were migrating to the new version who stood frightened in the look of all that button-madness. Users who were learning SharePoint 2010 were struggling, and when I showed them a 2007 site they were wondering why Microsoft has gone this way.I even got into trouble for pointing that out to the organisation.

Ok, enough personal ranting. (I am still a happy SharePoint consultant, and I am still convinced that it is a great platform for organisations to do all sorts of business collaboration, publishing, content management and so on).

So, when I found Tobias Lekman ‘s blog and his post about hiding inactive buttons on the ribbon, I was happy that he thought about the end-users and simplicity of use.

He uses JQuery to hide inactive tabs and buttons.

A copy of his code:

<style type="text/css">
  A.ms-cui-disabled {
        DISPLAY: none !important
  }
</style>

<!-- IMPORT JQUERY -->
<script src="/REFERENCE TO YOUR JQUERY SCRIPT/jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
function checkRibbon() {
    // Loop the tab groups
    $("div.ms-cui-tabContainer ul li.ms-cui-group").each(function () {
    var obj = $(this);
    // How many links in total in this group?
    var allLinks = $("a", obj).length;
    // How many are disabled?
    var disabledLinks = $("a.ms-cui-disabled", obj).length;
    // If all links are gone, hide the ribbon group
    if (allLinks == disabledLinks) {
            obj.hide();
    }
    else {
    // Some are active, show the group
      obj.show();
      // Remove container for inactive ctrls so that all controls are top aligned
      $("a.ms-cui-disabled", obj).each(function () {
          if ($(this).parent().attr("class") == "ms-cui-row") {
                $(this).parent().hide();
          }
    });
}
});
}

// Track current selected ribbon tab
var ribbonSelected;
function checkRibbonState() {
        // Has the ribbon tab changed or has the ribbon never been set up?
        var id = $("li.ms-cui-tt-s").attr("id");
        if (ribbonSelected != id)
        {
                ribbonSelected = id;
                checkRibbon();
        }
}
// Start the watcher for ribbon select. 
function beginCheckRibbon() {
// Increase parameter from 10 up if you have performance issues
        var checkRibbonStateInterval = setInterval("checkRibbonState()", 10); 
}

// Start the watcher when the page has finished loading
$(document).ready(function () {
        setTimeout("beginCheckRibbon()", 5000);
});
</script>

As always, do not forget the jquery library reference !

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.


2 thoughts on “Hide inactive buttons and tabs on the ribbon in sharePoint 2010 via jquery”

  1. This works great on Editform, NewForm and DispForm. Is there any code that would work on a list view since the controls are not added until the list is displayed?

Leave a Reply

Your email address will not be published. Required fields are marked *