Last year I wrote a blog article describing how to turn a standard SharePoint 2010 web part zone into Tabs (Adding Tabbed Web Parts in a SharePoint Page Layout). Recently I was asked for downloadable source code - and I thought now would be a good time to revisit the code, refactor it a bit, and also adapt it for SharePoint 2013.
Now on CodePlex...
Before I go into more detail and show some screenshots, for those of you wanting to dive into the source code right away, here it is:
In CodePlex, you'll find 2 solutions: 1 for SP2010, 1 for SP2013. Each simply contains 1 Page Layout with a working deployable example of how to implement tabbed web part zones (essentially my previous blog article in practice). The description of how the 2010 version works was largely covered
here, and the source code is largely similar save some refactoring and switching over to a CDN for JQuery.
Differences between Tabs in 2010 vs 2013
2013 Tabs In Action
And then once deployed, this is what it looks like (using JQuery UI theme "Redmond" for styling):
And Voila! We have easy to use, reusable tabs in SharePoint 2013. No additional features, server side code, and easy to maintain.
I fixed a bug on CodePlex, so if you were noticing
this issue, please get the latest code and wsps for either the 2010 or 2013 version.