I had an idea the other day to come up with a nice way to keep the ribbon away when I don’t really want to use it or see it. This is a basic concept of the idea which could use cleaning up or expanding upon. It’s a little snippet of jQuery that hides’ and shows the ribbon when the user click on an arrow in the top left corner.

Something like this.

and when you click the arrow the ribbon would hide.

ok so to accomplish this you can either put this in your Masterpage or in a CEWP.  The first line reference jQuery API and the second referencing our script.

so the custom script can be downloaded here.

The top two lines of the script point to images files for the arrow. I’m using pretty crappy images in the picture above so they are not worth posting. Download or make two unique images and modify those top two lines in the script.

The rest of the script is basic just four functions FlipArrow, IsRibbonOpen, CloseRibbon and OpenRibbon. If you’d like to change the CSS of the arrow then take a look at line 7 of the ribbonUtil.js file.

 I have all the position, height and width, of the arrow images in there. So if you do plan to change them out them you’ll need to specify the height and width of your image file in there.

So this concept is pretty simple. It could be expanded out to save the state of the ribbon between pages, either by cookie or session variable. Also you could do something a little more graphically appealing. If you do try it out let me know how it goes.

About the Author

Developer, Designer, Thinker, Problem Solver, Office Servers and Services MVP, & Collaboration Director @ SoHo Dragon.

View Articles