SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
up vote 2 down vote accepted

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 =$('.hack').text()), function(id) { 
  return $('[webpartid=' + id + ']');

Here is a start of a gist which handles the jQuery part: (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:

  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 );
share|improve this answer
Hi Eirikb, Thanks for the answer - could you please update the entire code? – spStacker Sep 18 '12 at 21:35
I will try to stir something together for you when I get my hands on a SharePoint at work tomorrow :) – eirikb Sep 18 '12 at 21:41

What you could do is use the jQuery 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>
    //Webpart 1
<h3><a href="#">Section 2</a></h3>
    //Webpart 2
<h3><a href="#">Section 3</a></h3>
    //Webpart 3

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

$(document).ready(function() {
share|improve this answer

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.

share|improve this answer
Actually, is quite possible to nest a webpart inside another webpart. The thing is your users wont be able to configure them. Your best bet is what @erickb recommends. Using bootstrap, JqueryUI or whatever javascript tab plugin you find suitable for your needs – Jaime Sep 17 '12 at 20:35
Good to know! Definitely this is a great time to use one of the many good jQuery plugins. – GavinB Sep 17 '12 at 20:41

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.