Is there a css class/id in SharePoint 2013 that hide elements when the ribbon is in use?

I've got some elements that I don't want to show when the user's in edit mode!

In the picture below you can see that the ribbon is expanded (shown in red). IF the ribbon is expanded I want to hide the menu shown in blue cross. This is just an example!

enter image description here

To clarify what I mean with "ribbon is in use", that the ribbon is expanded (show picture marked as red):

enter image description here

Ex: the pagetitle ( #s4-titlerow ) get's hidden .. ( .s4-titlerowhidetitle )

I know I can manage this with some javascript by checking the "active" ribbon tab. But isn't there a cleaner way?

  • Could you clarify what you mean by "ribbon is in use"? Mouseover/click on button/click on ribbon tab?
    – Thomas
    Oct 25, 2013 at 7:25

5 Answers 5


I know you asked for 2013 but I'm leaving the 2010 one here too in case anyone go crazy like you did.


When any ribbon tab is open (other than the 'browse' one) it forces a 135px height on its container, which is a sibling of the #s4-workspace container, see where I am going?

#s4-ribbonrow[style='height: 135px;'] ~ #s4-workspace #s4-leftpanel {
    display: none;

This will hide the #s4-leftpanel only when the ribbon is stretched to the 135px height.


Same deal but simpler, gladly we get an actual class in the #s4-titlerow container:

#s4-titlerow.s4-titlerowhidetitle ~ #contentRow #sideNavBox {
        display: none;

The general sibling selector ~ is IE7+ and the attribute selector IE8+ so even without testing it there it should do the trick on IE8+.

That was fun to put together, thank you!

  • Thank you! Finally I found something useful to use siblings on :)
    – Plexus81
    Nov 6, 2013 at 7:50

If the idea is that some content should "fall behind" the Ribbon (such as a header, navigation, etc.) you can just place your markup in the with the ID "s4-titlerow".

This gets automatically hidden when the Ribbon displays, giving the effect that the Ribbon falls "on top" of the content.

Otherwise, I would give a try to any of the script proposed answers.


this function:

function IsRibbonHidden()
return document.getElementById('RibbonContainer_activeTabId').value == "Ribbon.Read";

will return true when the ribbon is inactive, and false when it expanded (or null when the ribbon is absent). You can attach a javascript event receiver and hide/unhide the left menu depending on what the function returns.


I needed to hide the Edit Item option. So, I identified the id for that tag and had hidden it.

For Edit Item the id was Ribbon.ListItem.Manage.EditProperties-Large (you can easily check it from inspector tool in FireFox). And then doing $("#Ribbon.ListItem.Manage.EditProperties-Large").hide() worked.

  • I'm not trying to hide elements inside the ribbon, but in the body of the page! I wan't to do this without using jquery, if possible
    – Plexus81
    Oct 31, 2013 at 9:52

If you want to force this type of behaviour for users, then F.Aquino's solution is what you need.

Otherwise, there is one out-of-the-box solution for users: use the "Focus on Content" button on the top-right side of the ribbon.

Focus on Content

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.