SharePoint Tabbed Web Parts

 

               With this Blog, I would like to share with you a SharePoint feature written by a gentleman called Mark Rackley. I take no credit for this other than having the pleasure of passing this method on for others to also benefit from.

               Please visit: http://www.markrackley.net/2015/08/16/sharepoint-tabbed-web-partshillbillytabs-3-0/

               If you have a single SharePoint page that contains several WEB parts in a single Zone you will know that they all pile up on top of each other. This in turn make the page very long and has the user scrolling up and down the page to the WEB part they want to view. You could always minimise the WEB part if you wished but this method is much more pleasing to the eye.

               We can instead place each WEB part into a single TABBED element on the page as seen below. The insert is the same WEB Part showing how we can display different Library’s within the same view simply by clicking each tab.

 

Here we can see two WEB Apps sitting in a TABBED view requiring the user to simply click on any tab to show the WEB part.

               The WEB Part can still be clicked on to open the whole library up in its own page as normal.

               To make all of this happen simply add the required WEB Apps into a single zone.

               Then include a SEWP Scrip Editor Web Part. Edit the SEWP and add the code below – save – and exit to the page in Browse mode.

               You can vary the way things are presented by turning on or off the variations in the code below.

               Also, you can amend the Display colours (Theme). Link to http://jqueryui.com/themeroller/ to create a new Theme and download it. Change the reference in the file below to point to the revised CSS file.

 

<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>

Kind Regards

Andy Taylor

IT Solution Architect

 

Feedback

If you have questions about Microsoft SharePoint, feel free contact us via the form below.