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!
Well, implementation is simple.
- 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.)
- Upload the txt file to SharePoint site -> Site Assets library.
- Open the page where you want to have tabbed webparts.
- 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.)
- In Content Editor Webpart properties, the set/enter URL for .txt file (which uploaded on Site Assets Library.) on "Content Link" property.
- 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".
- Click "OK" to save changes of webpart properties.
- Save the page and publish(If enabled).
- 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!