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