Project Description
WebPart Collapser is a lightweight, customizable jQuery plugin for SharePoint 2007 that allows visitors to expand/collapse WebParts. Through the use of cookies, the collapsed state of any webparts will be saved and collapsed each time a user visits a page.

Details

The plug-in places a link at the bottom right of each web part on a page which hides the contents of the web part (except the web part title) and replaces it with a link which allows the contents to be shown again. Using cookies, any WebParts hidden by a user will be saved when the user revisits the page.
Other key features include:
  • Hidden web parts will not display a collapse link, by design.
  • You can customize which WebParts you want to enable collapse on, or you can enable collapse on all of them.
  • You can change the text of the Expand and Collapse links. You can also use images or even dynamic functions to display the text you want in place of the default captions.

Installation

To install the plug-in, you’ll need to upload the plug-in to SharePoint. I would recommend creating a document library at the root of your site which contains all of your jQuery scripts, including the jQuery core.
Once you upload the plug-in, you’ll need to add a script reference to it (and jQuery):
<script type="text/javascript” src="/path-to-plugin/jquery-spcollapse-1.0.min.js"></script>
<script type="text/javascript" src="/path-to-plugin/jquery-spcollapse-1.0.min.js"></script>

If you plan to use this plug-in on multiple pages within your site, I recommend you add these references to your MasterPage. Otherwise, you can place them into a CEWP (Content Editor Web Part).
Once you have your script references, you’ll need to initiate the collapse plugin. To do this, you’ll need to add some code to your CEWP (preferably the same CEWP as above, if you created one), and add the following code:
<script type="text/javascript">
$(document).ready(function () {
    $.WebPartCollapser();
}
</script>

This will load the WebPart Collapser with all default options on every visible web part on the page. You could similarly add this code into the MasterPage to enable the plug-in on all of your pages.
If you want to exclude some WebParts, or change any other default options, scroll to the Customizations section below.

Customization

WebPart Collapser has a few customization options. The table below shows how to use these options.
Parameter Description Default
CollapseCaption Changes the caption for the Collapse Link - Collapse
ExpandCaption Changes the caption for the Expand Link + Expand
DontCollapse Comma Separated list of WebParts which should not be collapsible none


Example Usage:
<script type="text/javascript">
$(document).ready(function () {
    $.WebPartCollapser({
       "CollapseCaption":”Hide Content",
       "ExpandCaption":"Show Content"
    });
}
</script>

DontCollapse
DontCollapse is a comma separated value that includes the IDs of the WebParts you don’t want to be collapsible. To obtain the ID, you’ll need to look at the source html of your page – it should be the ID of a <td> tag which looks something like “MSOZoneCell_WebPartWPQ2”.
Example:
<script type="text/javascript">
$(document).ready(function () {
    $.WebPartCollapser({
       "DontCollapse":"MSOZoneCell_WebPartWPQ2, MSOZoneCell_WebPartWPQ5"
    });
}
</script>


To view other projects we're working on, and to see our SharePoint articles, click http://www.sharepointclowns.com.

Last edited Jun 29, 2011 at 10:18 PM by crackelacken, version 5