Easy method to convert a SharePoint 2013 Content Editor WebPart into Tab Pages

In my previous post I have explained how to create a Tab Pages WebPart in SharePoint 2013 with Visual Studio 2012. In this post we can see how to convert a Content Editor WebPart into Multi Tab Pages in SharePoint 2013.

Steps

1. Download the scripts and CSS file from the bottom of this post

2. Extract the zip file and upload the extracted files  to Style Library of the SharePoint Site you wish to have this Tab Pages. (For this demo, I have created a new asset library named as “Assets” and placed all files into it).

3. Create a new Page or Edit an existing Page

4. Add a Script Editor WebPart and a Content Editor WebPart to that Page

5. To attach the downloaded script files to the page, edit the Script Editor WebPart by clicking the “Edit Snippet” link

Add reference to the scripts and CSS. Find below the code which I have used for this demo. Change the site URL accordingly.

 <script src="http://srv1:902/trials/Assets/jquery-1.7.1.min.js"></script>
 <script src="http://srv1:902/trials/Assets/jquery.ba-hashchange.min.js"></script>
 <script src="http://srv1:902/trials/Assets/jquery.easytabs.min.js"></script>
 <link href="http://srv1:902/trials/Assets/tabs.css" rel="stylesheet" />
 <script type="text/javascript" charset="utf-8">
     $(document).ready(function () {
         $('#tab-container').easytabs();
     });
 </script>

6. To create the tab pages add the below content to the Content Editor WebPart by clicking “Edit Source” ribbon item available in the Format Text Tab

 <div class="tab-container" id="tab-container"> 
    <ul class="etabs"> 
       <li class="tab">
          <a href="#t1">Tips</a></li> 
       <li class="tab">
          <a href="#t2">Tutorials</a></li> 
       <li class="tab">
          <a href="#t3">Articles</a></li> 
    </ul> 
    <div class="panel-container"> 
       <div id="t1"> 
          <h2>Heading for Tab 1</h2> 
          <p> Here goes the content for Tab 1 </p> 
       </div> 
       <div id="t2"> 
          <h2>Converting a SharePoint Webpart to Tab pages</h2> 
          <p> This articles shows you how to convert a SharePoint WebPart into a multi tab pages </p> 
       </div> 
       <div id="t3"> 
          <h2>Heading for Tab 1</h2> 
          <p> Here goes the content for Tab 3 </p> 
       </div> 
    </div> 
 </div>

The below is the rendered output of above provided html snippet

Key Points to be considered

1. This plugin injects CSS classes to “div” tags to set the active tab .When you try to edit the content editor web part after the tabs are created , the attributes of “divs” would get changed based on the interaction performed in the tab page (css classes will be added to active tab by tabs plugin) . Before saving back the content editor, ensure that no extra classes are included as a part of “tab divs”.

2. Ensure that you have removed data-easytabs="true" from the parent div while you edit the content editor web part. This attribute get added to the parent div once the Tab Control is rendered.

3. To maintain the history of tab pages navigation, the javascript file “jquery.ba-hashchange.min.js” is required. Every tab click would be considered as a new page navigation in the browser history. So if you click the back button of browser it will bring you back to the previous tab you were in.

4. This WebPart uses Easy Tabs jQuery Plugin developed by Alfa Jango . This plugin in not compatible with the current version of jQuery. For this demo , I have used jQuery version 1.7.1

Download Source Code