SharePoint 2013 - Hide Recent from Left Navigation

Tags: CSS, jQuery, SharePoint 2013, SharePoint Designer 2013, SharePoint Online

This has already been written about, but I couldn't find a good step-by-step guide that had all the pieces clearly laid out.  So, that's the goal of this post.

The "Recent" section in the left navigation of SharePoint 2013 is incredibly annoying.  In my opinion, it's something that should be off by default, but we should have a way to enable it as desired through the user interface.  Unfortunately, it's on by default and if we want to turn it off, we can't.  It's not possible.
SP2013_HideRecent1.jpg

As an alternative, we can hide it with jQuery and CSS.  Follow the steps below for success.
1.       Download jQuery from:  http://jquery.com/download/.  In my case, I ended up with version 2.1.1.
2.       Figure out where to store jQuery in your SharePoint site collection.  I don’t recommend using a content delivery network (CDN) or any URL that’s in another domain due to trust issues.  In my case, I created a document library in the site called “js” in which I plan to store any and all JavaScript files.  I did this in the top-level site to ensure that jQuery is easily referenced from anywhere within my site collection.
SP2013_HideRecent2.jpg
3.       Now that jQuery is available within your site collection, you can hide that pesky “Recent” section on one page or on all pages following the methods below.

Hide “Recent” section on one page

1.       Edit the page
2.       Add a Content Editor Web Part to the page
3.       Paste this code into the Content Editor Web Part, making any changes you need to.
<script src="/js/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
  $("#sideNavBox .ms-core-listMenu-item:contains('Recent')").parent().hide();
 });
</script>
4.       Save/Check In/Publish the page and you’re done.

Hide “Recent” section on all pages

This assumes that all pages in your site collection are referencing the same master page.  Of course if you have multiple master pages and site collections, you’ll need to do this for each master page being used within each site collection.
1.       Edit the master page of your site in SharePoint Designer 2013 (other methods work fine as well).
2.       Add a reference to jQuery in the HTML <head></head> section of your master page.
<!-- jQuery addition -->
<SharePoint:ScriptLink language="javascript" name="~sitecollection/js/jquery-2.1.1.min.js" runat="server" OnDemand="false" LoadAfterUI="True" />
3.       Add the jQuery script to hide the “Recent” section within the “PlaceHolderAdditionalPageHead” content placeholder.
      <script type="text/javascript">
 $(document).ready(function() {
  $("#sideNavBox .ms-core-listMenu-item:contains('Recent')").parent().hide();
 });
</script>
 
Hide_Recent_Master_Page_2015-03-23_14-47-12.png
4.       Save/Check In/Publish the master pages and you’re done.

The Result

View your site again and you shouldn’t see that annoying “Recent” section in the left navigation anymore!
SP2013_HideRecent4.jpg