Over two years ago I created a simple little script to allow people to place SharePoint Web Parts into tabs using the jQueryUI library. Just by adding a script to a page in SharePoint you could easily put one or all of your web parts into a well organized tab structure.
And there was much rejoicing.
This little script has quickly grown into one of the most popular solutions I ever put in my blog. Last year I updated the script to add additional features. Since then, I’ve had several requests for even more features to be added (You guys are so needy). So, being the nice guy that I am, I’ve once again updated my tabs script to add several features and fix a couple of shortcomings.
New Features / fixes
New stuff in version 3.0!
Multiple tabs on one page!
Many people have been asking for the ability to have multiple tabs on a page. With this latest version it now becomes possible. Simply add an additional Content Editor Web Part onto your page and link it to a separate script for the other tab. Watch the video below for an example.
Respect for Web Part Zones!
In the previous version of the Tabbed Web Part script, the default functionality was to grab every web part on your page and stick them into tabs. That’s all fine and dandy, but what about when you only want web parts in a particular zone placed in web parts and not every single web part on the page? With this latest version, the default behavior is to only take web parts from the current zone the Content Editor Web Part is placed in and place only those web parts into tabs. Don’t worry, you can still specify exactly which web parts you want to appear in a specific tab and these web parts may live in separate zones.
Third Party Add-Ins Support!
A few people commented that third party Apps (Add-ins) did not appear in the tabs properly. I have modified the script to now allow those Add-Ins to also be placed in tabs. This does not mean every single third party Add-In will work. I can’t control what some crazy people do in their mark-up, but my tests did work for the apps… add-ins I tried.
Hide Error Web Parts!
In previous versions of the script, if there was a web part on the page that a user did not have access to because of audiencing, the user would see an Error on the page where that web part existed. In this latest version of the script, all those Error Web Parts are hidden from the users.
Fade In Effect!
Instead of users seeing a jarring reorganization of the screen as they are placed in web parts, I’ve updated the script to hide the content zone until the tabs are created and then fade in the page to give the page load a more polished look and feel.
Sound pretty cool? You guys want it? Well… not so fast. Because of these modifications I am no longer supporting SharePoint 2010. Will it work in 2010? I kind of doubt it, but I honestly haven’t tried yet. I HAVE tested this script on both Office 365 and On-Premises SharePoint 2013 though.
How Does it Work?
The steps to put tabs on your page are quite simple. All you need to do is:
- Write a script like the example below.
- Upload the script to a document library (I use “Site Assets”)
- On the page that you want tabs, add a Content Editor Web Part.
- Link the Content Editor Web Part to the script you uploaded in step 2.
- Ta.. and da…
Again, the default behavior is to take every web part in the particular web part zone and place them into tabs, however you have the ability to specify which web parts you want to appear in tabs (just like in previous versions).
In addition, I’ve now placed the core logic into a script that can be referenced via CDN here:
https://www.markrackley.net/scripts/jquery.HillbillyTabs.2013.js
This greatly simplifies the script you need to write. You can also of course place the above CDN script in your document library.
Here’s a video of the script in action:
And here is the simplified script that you need to upload to your document library:
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="//www.markrackley.net/scripts/jquery.HillbillyTabs.2013.js"></script><link type="text/css" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/start/jquery-ui.css" />
<div id="tabsContainer"></div>
<script type="text/javascript">
jQuery(document).ready(function($) {//Put 2 web parts in 2 different tabs
// var webPartTitles = ["Web Part Title 1","Web Part Title 2"];
// HillbillyTabs(webPartTitles);//Create a Tab with Two Web Parts, and a second tab with one Web Part
// var webPartTitles = ["Tab Title;#Web Part Title 1;#Web Part Title 2","Web Part Title 3"];
// HillbillyTabs(webPartTitles);//Put all web parts (that have visible titles) in current zone into tabs
HillbillyTabs();});
</script>
Troubleshooting and Commonly Asked Questions
I’ve tried to make this as simple to use as possible (again, watch the video if you need help), but people seem to always have questions and common issues. So, here to hopefully save you the time of sending that email or asking that question in a comment….
Changing the tab colors
If you don’t like the colors, you can use jQueryUI’s theme roller to create your own theme, then reference THAT .css file in your script instead of the theme I reference (line 5 above).
Tabs only showing in edit mode
This can be caused by one of two things.
- You need to disable the “Minimal Download Strategy” feature under Site Settings->Site Features
- You need to make sure the Chrome Type for the Web Part is set to “Title Only” or “Title and Border” in the Web Part Properties. The title MUST be visible in order for the script to find your web part.
That’s pretty much all there is to it! Hope you enjoy and thanks for stopping by!