Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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
add comment

4 Answers 4

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 = _.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 );
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
add comment

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>
share|improve this answer
add comment

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
add comment

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
add comment

Your Answer

 
discard

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.