Convert a WebPart Zone in MOSS into Accordion or Tabs Style Interface
September 2, 2009
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 containing the TabAccordion WebPart in Edit mode
WebPart Zone converted into Accordion
WebPart Zone containing the TabAccordion WebPart in Edit mode
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
13 Comments Add your own
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed
1.
Luminus | September 3, 2009 at 3:51 pm
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.
pateketu | September 3, 2009 at 8:25 pm
Have fixed the broken link to the WSP Package.
3.
Luminus | September 4, 2009 at 10:21 am
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?
4.
pateketu | September 4, 2009 at 5:50 pm
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
5.
Aryan | October 8, 2009 at 6:53 pm
Hi Ketul
How do I move the TAB to the TOP. Please let me know.
Thanks
6.
pateketu | October 8, 2009 at 7:14 pm
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
7.
Aryan | October 8, 2009 at 7:12 pm
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
8.
Savan | October 9, 2009 at 6:54 am
thanks….
It helped me a lot….
9.
Richard | October 9, 2009 at 12:41 pm
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 ?
10.
pateketu | October 9, 2009 at 1:03 pm
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
11.
Richard | October 9, 2009 at 1:16 pm
Ok, Great !! Thank you !
12.
Todd | December 10, 2009 at 8:20 pm
would you mind posting up the source code for the tabs on top?
Thanks,
13.
pateketu | December 10, 2009 at 10:25 pm
I think the source code is for tabs on the top?