The idea

The home page is a natural place to expose the content of your SharePoint site. However, often this page becomes over packed, and this affects the user experience.
One way to improve readability is to append an expand/collapse button to each Web Part. At page upload, only the main Web Parts are expanded, but the user has the option to open other Web Parts he/she is interested in.

The idea is not from me, a script for SharePoint 2003 was posted on a blog a couple years ago [Placeholder for the credits – unable to locate the original post at this time]. But this script doesn’t work on SharePoint 2007.

This week, a reader reminded me about this, and asked me if I had a solution for SharePoint 2007. So here it is! Note that I have written my script from scratch using a different method, specific to SharePoint 2007.

Warning! Don’t abuse of this: even though the content of the Web Parts is not visible, it is still loaded with the page, and too many Web Parts will impact performance.

Below an example with a calendar: usually, the week view and month view are too big for the home page. One way to deal with it is to use the minimized state by default.

Collapsed:

Expanded:

Of course, another option would be to use the technique described here.

The method

This is simply another use of the CSS display property: the display is set to “none” to hide a Web Part.

The code

Drop a CEWP anywhere on your page and bind it to this code:

<script type="text/javascript">

//
// Expand/Collapse Buttons
// Feedback and questions: Christophe@PathToSharePoint.com
//

function WPToggle(thisId, ImageId)
{
if (document.getElementById(thisId).style.display=="none")
{
document.getElementById(thisId).style.display="";
document.getElementById(ImageId).src = "/_layouts/images/minus.gif";
}
else
{
document.getElementById(thisId).style.display="none";
document.getElementById(ImageId).src = "/_layouts/images/plus.gif";
}
}

function ExpandCollapseBody()
{
var i = 1;
var WPid = "WebPartWPQ1" ;
var WPtitleid = "WebPartTitleWPQ1" ;
var Toggleid = "ToggleImage1" ;
do
{
try
{
document.getElementById(WPtitleid).innerHTML = '<IMG id="' + Toggleid + '" onClick="WPToggle(\'' + WPid + '\',\'' + Toggleid + '\')" alt="Expand/Collapse" style="margin:6px 5px 0px 2px; float:left; cursor:pointer;" src="/_layouts/images/minus.gif" />' + document.getElementById(WPtitleid).innerHTML ;
if (document.getElementById(WPid).style.display=="none")
{
document.getElementById(Toggleid).src = "/_layouts/images/plus.gif";
}
}
catch(err) {}
i = i + 1;
WPid = "WebPartWPQ" + i ;
WPtitleid = "WebPartTitleWPQ" + i;
Toggleid = "ToggleImage" + i;
} while (document.getElementById(WPid))
}

_spBodyOnLoadFunctionNames.push("ExpandCollapseBody()");
</script>

How about the default minimize/restore option?

Each Web Part comes with a customization menu in its top-right corner, including a minimize/restore option. The expand/collapse buttons have a different role:
- they can be used by readers and contributors, while the minimize/restore option is for Web designers.
- the changes are not saved; the next time the page is uploaded, the Web Parts are back to their initial state.

Possibly related posts: (automatically generated)