Easy Tabs for SharePoint 2013

May 21, 2015 · 6 min read

Easy Tabs for SharePoint 2013

Easy Tabs is a 3rd party javascript library that allows site designers to place webparts in a tabbed format on a page. It is Pure Javascript. Doesn't require JQuery/ JQueryUI libraries to work. Because of layout/element changes in SharePoint 2013, the current version will not work as it is.

I debugged the code and fixed it. Now it works well in SharePoint 2013!

Easy Tabs on SharePoint 2013

Well, implementation is simple.

  1. Copy the code below and save it as .txt file. (Or download the htm code file directly from URLs given in bottom of this article.)
  2. Upload the txt file to SharePoint site -> Site Assets library.
  3. Open the page where you want to have tabbed webparts.
  4. Edit the page and add Content Editor Webpart on bottom in Same Webpart Zone. (Note: The code will create tabs with WebParts only on same webpart zone.)
  5. In Content Editor Webpart properties, the set/enter URL for .txt file (which uploaded on Site Assets Library.) on "Content Link" property.
  6. Expand "Layout" section on the Content Editor webpart and enable/check "Hidden" option. If "Hidden" option is disabled then set "Chrome Type" property (under​ Appearance section) to "None".
  7. Click "OK" to save changes of webpart properties.
  8. Save the page and publish(If enabled).
  9. Refresh the page to see EasyTabs in Action​.

You can change the color codes in below CSS style section to match with your site theme.

Disclaimer: Easy Tabs code developed/licensed by Christophe Humbert. I just fixed it to work in SharePoint 2013.
http://usermanagedsolutions.com/SharePoint-User-Toolkit/Pages/Easy-Tabs-v5.aspx

-------------------------------oOOo.............................. /.\_/.\..............................oOOo..............................

.et-tab{font-size:8pt;font-weight:bold;padding:3px 10px;background:url("/\_layouts/images/selbg.png") repeat-x;display:inline-block;cursor:pointer;} .et-activetab{background-color:#ffa83f;border:solid 1px #ffa83f;color:#351f01;} .et-inactivetab{background-color:#bcc7f2;border:solid 1px #bcc7f2;color:#585384;} .et-separator{height:5px;background-color:#ffa83f;} .et-tabrow{white-space:nowrap;} .et-offscreen{position:absolute;max-height:1px;max-width:1px;top:-9999px;}

-------------------------------oOOo.............................. /.\_/.\..............................oOOo..............................

If above code doesn't work, Download from here :

http://justpaste.it/easytabsv5
http://jsfiddle.net/venkatx5/q3pjLvp7/

Happy Coding!

This article is part of the GWB Archives. Original Author: venkatx5

New on Geeks with Blogs

  • We Won The One Award I Actually Care About

    Full Scale made the Inc. 5000 for the fifth year straight, the 12th listing across my three companies. Here is why the one award you cannot buy is worth stopping for.

  • Your Customers Build the Features Now

    I let a tool I liked sit dead for a year rather than build the features I wanted. An MCP server meant I never had to, and your customers can do the same to your product.

  • Get the Size of a Directory in Linux the Easy Way

    du -sh for the quick answer, ncdu for the cleanup, df for the disk itself: every command for checking directory size in Linux, plus why du and df never agree.

  • Vim Search and Replace: The Ultimate Guide

    One :%s command replaces every match in a file before a find dialog would even open. The Vim substitute patterns worth the muscle memory: flags, ranges, capture groups, and multi-file edits.