Expand or Collapse Web Parts

Over the last weeks, I've come to appreciate the importance of defining feature-sets and controlling scope-creep!

"Hey, wouldn't it be cool if SharePoint could do this too!" (notice there is no question mark at the end of that 'question'.)

This scope creep has kept me pretty busy over the last few days and I've been able to develop a few cool little bits of Javascript for use with SharePoint. One of my favorites is a simple snippet of code to toggle the display of Web Parts on a page.

A requirement of my design was to show a lot of information without letting the page get cluttered, a relatively common challenge. In my recent work with <iframe>'s, I stumbled across the style.display attribute. Very handy for hiding elements of a web page and keeping clutter to a minimum.

The Challenge: Showing a .LOT. of information on a page while not letting it become cluttered and unusable.

The Problem: Web Parts can quickly overwhelm the page and there isn't an intuitive way to expand and collapse them.

The Solution: JavaScript and the CEWP!

:::Code cleanup as of 05DEC08:::

<script type="text/javascript">
//
// create array of table cells and loop through them
var theTDs = document.getElementsByTagName("TD");
var t=0;
while (t < theTDs.length)
{ try
{//
 // set up variables & format web parts
 tdID = theTDs[t].getAttribute("id");
 tdID = tdID.substr(tdID.indexOf("WPQ"));
 tdTitle = theTDs[t].innerText || theTDs[t].textContent;
 //
 // titles of WPs to skip
 if (tdTitle == "TITLE OF WEBPART TO LEAVE ALONE")
 { t+=1; continue; }
 //
 // add the +/- icon to the title of a web part
 if (theTDs[t].getAttribute("id").indexOf("WebPartTitleWPQ") == 0)
 { strTitleHTML = "<H3 class='ms-standardheader ms-WPTitle'><NOBR>";
  strTitleHTML += "<span onClick='expandCollapse(\"" + tdID + "\")' ";
  strTitleHTML += "style='cursor:hand'>";
  strTitleHTML += theTDs[t].innerText || theTDs[t].textContent;
  strTitleHTML += "</span></NOBR></H3>";
  strImgHTML = "<img id='img" + tdID + "' ";
  strImgHTML += "style='margin:6px 5px 0px 2px;cursor:hand;float:left' ";
  strImgHTML += "valign='middle' onClick='expandCollapse(\"" + tdID + "\")' ";
  strImgHTML += "src='/_layouts/images/plus.gif'>";
  theTDs[t].innerHTML = strImgHTML + strTitleHTML;
  document.getElementById("WebPart" + tdID).style.display = "none";
 }
}
catch(err){}
t+=1;
}
//
// function called when the WP title OR the +/- icon is clicked
function expandCollapse(id)
{ wp = document.getElementById("WebPart" + id);
if (wp.style.display == "")
{ wp.style.display = "none"; }
else
{ wp.style.display = ""; }
img = document.getElementById("img" + id);
if (img.src.search("minus.gif") > 0)
{ img.src = "/_layouts/images/plus.gif"; }
else
{ img.src = "/_layouts/images/minus.gif"; }
}
</script>

To make it work, all you have to do is put this code into a Content Editor Web Part at the bottom-right most position on the page. This code will collapse every Web Part with a title and place a little "plus/minus" icon next to the title for easy access.

Before:
After:


Christophe from the blog Path to SharePoint has a different method for achieving this that I used as a reference from some of my work. It may be useful to you as well.

As always, I'm happy to help anyone with their implementation of this code. I ask that questions be asked here on the blog so that everyone can benefit from any solutions we come up with, but I'm happy to help via email as well.