Accordiion webpart in sharepoint 2010

Question

i have a zone in a webpart page which has around 4 webparts in it. I want to create a accordion wp which when add to the webpart page, show the 4 webparts inside the accordion tabs.

EDIT The number of webparts inside the zone will increase.

Answer 1

Twitter Bootstrap has a nice accordion solution they call Collapse. You don't need to include much to make it work with SharePoint. I use the tabs myself without any issues.

For the selecting you can use jQuery to traverse through parents (.closest()), but another option is to make your own Web Part and use WebPart.WebPartManager to print all the web part IDs, then you can simply select by $('[webpartid=...]').
You could use JavaScriptSerializer to serialize the IDs, like this:

Controls.Add(new Label { Text = serizlier.Serialize(listOfIds), CssClass = "hack" });

And with jQuery and underscore you do:

var $webParts = _.map(JSON.parse($('.hack').text()), function(id) { 
  return $('[webpartid=' + id + ']');
});

Update:
Here is a start of a gist which handles the jQuery part: https://gist.github.com/3747997 (without any code behind, just as an example - can be pasted directly into console).

In your code behind you could fetch the Web Parts like this:

Zone.WebParts.Cast<WebPart>().
  Where(wp => wp.ID != ID && wp.ZoneIndex > ZoneIndex).ToList()

and enforce that Title is visible, the JavaScript might need it for collapse headings:

webParts.ForEach(w => w.ChromeType = PartChromeType.None );

Answer 2

What you could do is use the jQuery Accordion

http://docs.jquery.com/UI/Accordion

Just put every webpart within a div and beneath a h3. And surround them all with a div. Like this example:

<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
    //Webpart 1
</div>
<h3><a href="#">Section 2</a></h3>
<div>
    //Webpart 2
</div>
<h3><a href="#">Section 3</a></h3>
<div>
    //Webpart 3
</div>
</div>

Then you only have to add the following script, and it should work (+inlcude jQuery of course...):

<script>
$(document).ready(function() {
$("#accordion").accordion();
});
</script>

Answer 3

If the other web parts are just there for rich content, one possible approach is to create a list with a field set to Rich Content, then use a customized ContentQueryWebPart to render the list contents and the html framework needed for the accordion. From there, you can tie in jQuery as normal.

Answer 4

Don't think you'll be able to create a web part in which you can nest other web parts.

Your best best would be to create a new Web Part Page layout that contains accordion tabs, each containing a web part zone and then add each of you web parts to an instance of that page.