Convert a WebPart Zone in MOSS into Accordion or Tabs Style Interface

This is a web part that turns all the visible web parts with a Title in a Zone into Tab or Accordion interface.  Just drop the webpart into a zone and see it convert all the visible webparts with a title in the zone  into part of Tab or Accordion.  It renders one tab/accordion menu per webpart.

Originally inspired by EasyTabs from PathToSharePoint but instead of embedding some JavaScript with Content editor web part, it’s a custom web part providing a property to control if it renders Tab or Accordion and JavaScript bit is done using jQuery.

Some customary screen shots!

WebPart Zone Converted into Tabs

WebPart Zone Converted into Tabs

WebPart Zone containing the TabAccordion WebPart in Edit mode

WebPart Zone converted into Accordion

WebPart Zone converted into Accordion

WebPart Zone containing the TabAccordion WebPart in Edit mode

WebPart Zone containing the TabAccordion WebPart in Edit mode

Properties of the WebPart

Properties of the WebPart

Download Full Source Code. Hopefully it’s commented just enough to understand what’s going on in the JavaScript.

WSP Solution can be downloaded from here. Once the package is deployed, Activate the Kark SharePoint Web Parts feature at Site Collection level and Tab Accordion web part will be available in the Web Part Gallery.

UPDATE
Have changed the JavaScript to render tabs at the top

Download WSP Here

Here is a screenshot


Please excuse the ugly looking Tabs, but hopefully CSS should be really easy to change

Advertisements

65 thoughts on “Convert a WebPart Zone in MOSS into Accordion or Tabs Style Interface

  1. Hi,
    Lovely looking webpart. I would like to try it out as it looks like it can help with something I’m currently working on but the WSP solution link is pointing to a file that does not exist.

    Could you please fix the link so I can download it.

    Thanks a lot.

  2. Thanks man. I’ve downloaded it. It works but I realise that it doesn’t work with all the webparts on the page. Are there specific webpart types that it works with?

    • It will work work with webparts in a single zone where the tab webpart is dropped. It will only work with WebParts with visible Title, so if you have webpart without title than that webpart will not become the part of tab/accordion

    • Aryan

      In createTabContainer function in kark.sharepoint.webpart.tabs.prototype look at following line:

      var lastTr = tBody.children(“tr:last”);
      lastTr.after(tabTr);

      that’s the code which is inserting the Tabs as the last row of table i.e at the bottom.

      To insert the container int the top change the code to:

      var firstTr = tBody.children(“tr:first”);
      firstTr.before(tabTr);

      that will insert the tab container as the first row of the table i.e. at the top.

      PS: I haven’t tested it but you get the idea

  3. If you have time, I am willing to pay you to make some modification for this Web Part. Please let me know if you have time to do this.

    Thanks

  4. Hello,

    Since I don’t have the knowledge to change source sode and recompile (I am not a developer). Has someone recompiled the wsp with that tabs at to TOP ? If so, could we have a link to it please ?

    • Hi Richard

      I posted the sample code for Someone who I think have changed the javascript code for the tabs to appear on the Top, I have asked them to post a link to a new WSP if they can, otherwise I will try and get you a new wsp, it’s actually pretty simple if you have any one who can just edit a JavaScript file, you don’t need to recompile the webpart for change in javaScript file

      • Looks like the source was for the accordion and tab that were vertical not horizontal (top), except if I missed something and need to do additional configuration?. I saw the wsp for the tabs on top, I was wondering if you wouldn’t mind posting the source for that.

        thanks again.

  5. Thanks for providing the source for this.

    Two questions:
    – Does this require JQuery to be enabled first?
    – Is there any reason why the solution is split into two projects?

  6. Hi Ketul,

    I’m having trouble adding the web part. I keep getting the “Unable to add selected webpart(s) – Cannot import Tabs Web Part” error.

    The solution deployment went off without a hitch and the assembly is in the GAC. I verified that a safe entry has been added to the web.config and I also activated a JQuery 1.3.2 feature just in case.

    I’m wondering whether I correctly built the WSP file from the VS solution. Just to be sure, I downloaded your WSP and compared the contents.

    The only difference I could find was is in the mainfest.xml; most noticably the ResetWebServer attribute for

    Yours:

    Mine:

    Did you manually tweak this later? I used WSP Builder to build the WSP from the Web Part Package project.

    Many thanks!

  7. You can ignore last post I have managed to get it working. The assembly name was getting screwed up after I merged the projects. All good.

    Now my question is whether there is a way to specify the placement for the tabbed web parts. At the moment, no matter where I place the Tab web part all the tabs end up at the top of the zone, above other web parts with Titles.

  8. Hi Genius,

    I am basically a graphic designer. I am a beginner in SharePoint as well and would like to know a step by step of how I can implement the WebPart in my SharePoint Site…. from ABC that is…..

    Even a link to an article clearly explaining this would be helpful.

    Thanks a lot in advance.

    Regards,
    Thendral

  9. Hi Genius,

    We have managed to deploy the Accordion WebPart on our site.

    We have Activated the Kark’s WebPart in Site Collection Features too.

    But, we are getting the following error when we Add this WebPart to a Zone –

    Unable to add selected web part .

    Accordion Tabs Menu Web Part: Cannot import Tab Web Part.

    and we are getting the following when we try to view the Web Part in the Site

    Cannot import Tab Web Part. at Microsoft.SharePoint.WebPartPages.WebPartImporter.CreateWebPart(Boolean clearConnections)
    at Microsoft.SharePoint.WebPartPages.WebPartImporter.Import(SPWebPartManager manager, XmlReader reader, Boolean clearConnections, Uri webPartPageUri, SPWeb spWeb)
    at Microsoft.SharePoint.WebPartPages.WebPartPreview.get_WebPart()
    at Microsoft.SharePoint.WebPartPages.WebPartPreview.CreateChildControls()
    at System.Web.UI.Control.EnsureChildControls()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

    Kindly correct us,

    Thanks,
    Thendral

    • Hi sorry for not replying for a while now, have been very busy at work. The error sounds liks something is messed up with DLL in the GAC, can you check if dll is present in the GAC?

    • Hi Mikhail,

      We have a SharePoint Site and I have deployed the Kark’s Multi-Tab / Accordion WebPart on the Site, the WebPart has been actually added to the WebParts Gallery, but when I add it in a WebPart Zone the above errors were displayed.

      I am not sure what an existing codeplex project is.
      I could not get what you are asking/telling me.

      Kindly advice what is best.

      Thanks a million for the reply,
      Thendral

  10. I have the need to add some text to the top of the Accordian container to explain to users how it works. e.g. “Click the tab heading below top expand/collapse content”.

    I was hoping to use the createTabContainer function to render some HTML for this purpose but it’s proving a lot trickier than I’d hoped. 🙂

    Any advice?

    • Sorry for a verrrrrrrrrry late reply,
      If you look at the createTabContainer() method in accordion class:

      /// No need of conatiner for accordion
      createTabContainer: function() {
      return null;
      },
      it just returns null you can create div in the function and insert it has first child element of this.wpZone

      I haven’t tested it, just a suggestion looking at soure code -:)

      • Hi pateketu,

        That’s great fro accordian btu I was actually hoping to modify it for both. Yabs is the tricky one. 🙂

        The content for the tabs row appears invalid. There seems to be an empty row getting generated.

        var tabTr = “”;

        I think have rectified this but am not sure how to add another row below it (tr:second). Or can I just do this:

        var tabTr = “”;
        ? var tabTr .= “My Content”;
        var tBody = this.wpZone.children(“tbody”);
        var firstTr = tBody.children(“tr:first”);
        firstTr.before(tabTr);

      • I don’t jQuery has “tr:second” selector but the code snippet you mentioned looks like needs to have properly formatted tr i.e.

        My Content

        and than insert it before the firstTr

      • I don’t think jQuery has “tr:second” has a valid selector. But your code snippet needs to format the tr properly i.e.

        My Content

        and than insert it before the first tr

  11. Unfortunately it does not add a custom web part to the tab view. Easy Tab web part had the same issue.

    What do you mean by a web part zone? I dropped my custom web part on a zone where I am dropping all other web parts. The custom web part appears to be above the tab web parts.

    • If you a dropping your webparts on a standard zone that you are using OOB zones. I actually remember when I did the webpart we only had custom webparts in Tab view and they all did work, the only requirement is your Web part must have a visible Title.

  12. I have quite a few custom web parts. I was able to add SOME CUSTOM web parts to the tab view but some of them don’t work.

    To elaborate further, the custom web parts that were added to the tab had forms. The one that I were to display items from a list did not get displayed in the tab.

    • not sure what’s going on, we had complex web parts that were displaying ok in Accordion and Tab. You may want to debug around line # 160 and see if it is finding a title TD

  13. I would like to see all WPs collapsed, rather then the top one collapsed. Wondering how easy it would be to add a WP setting for the Accordian view to “Collapse All by Default”.

    We’re gettig complaints from a bunch of ignorant users who don’t know to click the headings for the WPs underneath, as they think they are all empty. 😀

    • look at line # 190 in TabsWebPart.js

      if (i == 0)
      {

      if (this.selectedItemClass && this.selectedItemClass != null){
      tabItem.addClass(this.selectedItemClass);
      }
      } else {
      contentElement.hide();
      }

      remove the above if else statement and replace it with contentElement.hide();

      Please note that it is the common calss used by Tabs also so your first tab will also get hidden

  14. Hi,

    on deploying the wsp package, it gives the following error as reported by someone earlier.
    can you give any pointer to resolve this.

    thanks

    Cannot import Tab Web Part. at Microsoft.SharePoint.WebPartPages.WebPartImporter.CreateWebPart(Boolean clearConnections)
    at Microsoft.SharePoint.WebPartPages.WebPartImporter.Import(SPWebPartManager manager, XmlReader reader, Boolean clearConnections, Uri webPartPageUri, SPWeb spWeb)
    at Microsoft.SharePoint.WebPartPages.WebPartPreview.get_WebPart()
    at Microsoft.SharePoint.WebPartPages.WebPartPreview.CreateChildControls()
    at System.Web.UI.Control.EnsureChildControls()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Control.PreRenderRecursiveInternal()
    at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

  15. Everything worked great when I added the first .wsp file. but, when i retracted the solution, and tried to use the updated .wsp (that has the tabs at the top) I get the error “Unable to add selected webparts. According Tabs Menu Web Part: Cannot import Tab Web Part.”

    I’m going to use the first file, which has the tabs at the bottom…but, I would really appreciate it if you could help me out in getting this to work. Any help would be great!

    Thanks,
    Bobby

    • Hmm not sure what’s going on can you make sure the old verion of DLL disappears from the GAC after you retract? also make sure .webpart file is correctly pointing to Webpart assembly (I am assuming you are familiar with .webpart file)

      • Hi pateketu,
        I have downloaded ur .wsp file and added that soluiton through power shell
        i have deployed it globally and used that assembly for creating safe control in web.config file , now when i try to populate this web part in sharepoint 2010 its not appearing there , so please help me how to use ur solution for sharepoint 2010 , i am badly waiting for your help , please help me…….

  16. Delete the webpart from the gallery (for every web app it was deployed to) and update the solution again.

    It’s quite common for webparts not to be deleted during when a solution is retracted. Similarly a solution upgrade is unlikely to overwrite an existing web part, especially if it’s in use!

  17. Hi pateketu,
    I have downloaded ur .wsp file and added that soluiton through power shell
    i have deployed it globally and used that assembly for creating safe control in web.config file , now when i try to populate this web part in sharepoint 2010 its not appearing there , so please help me how to use ur solution for sharepoint 2010 , i am badly waiting for your help , please help me…….

      • could you please tell me what changes are to be done to make this code work for sp2010 , so that i shall try it, help me i badly require this in my project…..help me….

      • Well I have not really tried on SP2010, but the Tab/Accordian Webpart heavly depends on HTML generated by out-of-Box SharePoint to re-arrange the webparts into Tabs and Accordian, so I would say most of the changes would be in JavaScript

  18. Hi im using this in 2007 sharepoint. here you did for each webpart. but i need some webparts in a webpart zone and this some webparts should be displayed in a accordian . Is that possible to keep some webparts into a accordian instead of making each web part a accordian ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s