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

Comments

[Ben Schmitz]

Brandon, I wonder if you would be willing to break down the process of implementing a jQuery script (like the one here). I am a novice SharePoint developer, and I'm looking to simply add an expand/collapse functionality on the out-of-the-box web parts. What I'm having difficulty with is figuring out how to deploy this code. Where do I save files (I'm working with SP Designer 2010)? Does the css need to go somewhere else? How do I update the master page, or do I need to? I've done quite a bit of research, but I haven't been able to find any location that shows me the process from beginning to end.
~Thanks.

[Brandon Anderson]

Hi, Ben. I understand it all can be overwhelming at first. I've written posts addressing the questions you have; please see the posts listed at http://fitandfinish.ironworks.com/microsoft-sharepoint/. If you still have questions I'd be glad to try to answer.