How to Expand/Collapse Web Parts in SharePoint Using jQuery

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;
    });
}

Related Posts

• How to Create an Accordion Web Part