Show/Hide Ribbon by clicking a Web Part or by using jQuery


  • I am trying to hide the ribbon by default, but display the ribbon when a user gives focus (clicking) on any web part on a page. There are several sites I have tried to emulate, however, have run into a snag during the implementation. The sites I have found helpful, include:

    The option I am currently working with most is the 2nd choice which utilizes the keyboard keys CTRL-G to show/hide the ribbon. While this is a good solution, it does not address a critical element which is to show the ribbon when a web part is clicked or receives focus. How can I do this?

    Here is the current code to register the CTRL-G keys

    // Registering 'ctrl' + 'G' button press
    $.ctrl('G', function (s) {
        var ribbonElement = $(CtrlGControlsToHide);
        var displayPropValue = (ribbonElement.css('display') == 'none' ? 'block' : 'none');
        ribbonElement.css('display', displayPropValue);
        // Set display state for the following hour
        var date = new Date();
        date.setTime(date.getTime() + (60 * 60 * 1000));
        $.cookie(RibbonDisplayCookieName, displayPropValue, { expires: date });
    }, ["Control G pressed"]);
    // Loading cookie value of ribbon display
    if ($.cookie(RibbonDisplayCookieName) == 'block')
        document.write("<style> " + CtrlGControlsToHide + " { display:block; } </style>");

    Here is my attempt to show/hide the ribbon when a web part is clicked. Something is wrong with my code below.

    function OnRibbonMinimizedChanged(ribbonMinimized)
      var ribbonElement=GetCachedElement("s4-ribbonrow");
      if (ribbonElement)
        if (ribbonMinimized)
   = "none";
            //$(".mysidenav").animate({ 'margin-top': '15px' }, 0);
   = "block";

    Tuesday, October 16, 2012 3:25 PM

All replies

  • Hi,

    You dont need any specific Jquery code to achive this.

    Just add a content editor web part to the "AllItems.aspx" page and load a jQuery [no specific code to hide/show ribbon control], you will get the expected behaviour.



    Saturday, July 27, 2013 9:46 PM