Guest Author: Brandon Anderson

I was recently challenged with creating a web part zone in a page layout in which for every web part added to it, that web part took on expand/collapse functionality. The idea is that on the home page for this particular SharePoint site, users can add RSS feeds. Each of the RSS feeds is a web part, and each has many individual feed items. With the number of feeds and feed items open for modification, the information architect thought it best to collapse each feed web part by default and allow the user to expand and collapse the feed web parts as they desire.

To do this I needed to understand the HTML structure of web parts in SharePoint 2010 and write jQuery and CSS that would add the functionality and look-and-feel we were looking for. Here is the result:

Below is the jQuery script I wrote for the web part expand/collapse (or accordion) functionality.

function expandCollapseWebPartsInZone() {
$(".expandCollapseWebPartsInZone td.ms-WPHeaderTd").addClass("expandCollapseHead");
$(".expandCollapseHead").parent().parent().parent().parent().parent().parent().parent()
.addClass("expandCollapse");
$("table.expandCollapse .ms-WPBody").parent().parent().addClass("expandCollapseBody");
$(".expandCollapseWebPartsInZone .expandCollapseHead").click(function() {
var headParentRow = $(this).parent().parent().parent().parent().parent();
if($(headParentRow).next("tr.expandCollapseBody").hasClass("expanded")) {
$(this).removeClass("expanded");
$(headParentRow).next("tr.expandCollapseBody").removeClass("expanded");
}
else {
$(this).addClass("expanded");
$(headParentRow).next("tr.expandCollapseBody").addClass("expanded");
}
return false;
});
}

This article was originally published on the Ironworks Consulting blog Fit & Finish.

Guest Author: Brandon Anderson

Brandon Anderson is a SharePoint user interface and look-and-feel specialist.  He brings over 10 years experience with front-end web development to SharePoint implementations requiring customized branding. For the past 3 years, Brandon has worked extensively with the UI customization of SharePoint properties, both public and restricted-access, for clients of various sizes and industries.  Brandon is the lead Microsoft SharePoint front-end developer for Ironworks Consulting (www.ironworks.com) and hosts the blog SharePoint Putty (sharepointputty.com), where he writes about the user interface customization of SharePoint.