On past projects I have made web parts collapsible by wrapping web part zones with code in the page layout.  The disadvantage with this approach is that it is not adjustable by the client without modifying the page layout.  A project I just wrapped up required the flexibility for site owners to add or remove web parts that automatically became collapsible.  This project was for SharePoint 2010, but I converted the solution to work with SharePoint 2007.

Solution

This solution will work for WSS 2007 and MOSS 2007, and it makes use of Mark Miller’s Scripting Resource Center.  Please follow Mark’s instructions so you have the proper libraries to follow along below.  My code includes paths to these libraries and references them by name, so it is important to have your Scripting Resource Center at the root of your site collection and that you use the filenames as given below.  The script, CSS, HTML, and images for this solution will be stored in your Scripting Resource Center library, to which you will reference from a Content Editor Web Part you drop on your page.  I am also supplying the pre-configured Content Editor Web Parts as .dwp files that you can add to your web par gallery or import onto the page.

Step 1. Create the Scripting Resource Center libraries.
See http://www.endusersharepoint.com/2010/01/05/build-a-sharepoint-scripting-resource-center/.  I assume you have created your Scripting Resource Center at the root of your site collection and assigned it the path /ScriptingResourceCenter (any deviations will require adjustments to the solution’s HTML file).

Step 2. Upload the jQuery library into the “Resources-jQuery” library of your Scripting Resource Center.
You may or may not have a jQuery library already.

• If you already have your jQuery library version of choice, upload it into your “Resources-jQuery” library.
• If you do not currently have a copy of the jQuery library, go to http://jquery.com and click the “download(jQuery);” button.  Upload this file into your “Resources-jQuery” library.

Note: In the code provided, I assume you have uploaded the latest jQuery library version as of the time of this post, which is v1.4.2, and that the file is named jquery-1.4.2.min.js.  If you are using a different version or file name, you will need to update the solution’s HTML file (spuiguy_collapsible_web_parts_in_zone_2007.html) to use the correct file name.

Step 3. Upload the JavaScript, CSS, and HTML files into the “Resources-Scripts” library of your Scripting Resource Center.
Download the following files from my Box.net folder and upload to /ScriptingResourceCenter/ResourcesScripts:

• spuiguy_collapsible_web_parts_in_zone_2007.css
• spuiguy_collapsible_web_parts_in_zone_2007.html
• spuiguy_collapsible_web_parts_in_zone_2007.js
• spuiguy_collapsible_web_parts_in_zone_2007_instance.html

Note: The script in spuiguy_collapsible_web_parts_in_zone_2007.html that tests for and writes the reference to the jQuery library is borrowed from Christina Wheeler’s post “Transparent Overlays for SharePoint Interface Enhancement.”

Step 4. Upload the images into the “Resources-Images” library of your Scripting Resource Center.
Download the following images from my SPUIGuy blog and upload to /ScriptingResourceCenter/ResourcesImages:

• icon_minus_darkgrey_med.gif
• icon_plus_darkgrey_med.gif

Step 5. Upload the Content Editor Web Parts into your site collection’s web part gallery.
Download the following web parts from my Box.net folder and upload into your site collection’s web part gallery (located at /_catalogs/wp/Forms/AllItems.aspx).  The web parts will be named “SPUIGuy: Collapsible Web Parts in a Zone 2007” and “SPUIGuy: Collapsible Web Parts in a Zone 2007 Instance,” respectively.

• SPUIGuy Collapsible Web Parts in a Zone 2007.dwp
• SPUIGuy Collapsible Web Parts in a Zone 2007 Instance.dwp

Step 6. Add the Content Editor Web Parts to your page.
On the page you wish to use this script, add the “SPUIGuy: Collapsible Web Parts in a Zone 2007” web part to any web part zone that will not be collapsible.  Next, add the “SPUIGuy: Collapsible Web Parts in a Zone 2007 Instance” web part to the web part zone(s) for which you want to enable the expand/collapse.  You can add the “Instance” web part to as many web part zones on a page as you wish, but add at most one per web part zone; also, put only one “SPUIGuy: Collapsible Web Parts in a Zone 2007” web part on the page.

If for any reason you need to change the path to the solution’s HTML files, edit that web part and change the Content Link property.  In our example, we’re using the Content Link field value “/ScriptingResourceCenter/ResourcesScripts/spuiguy_collapsible_web_parts_in_zone_2007.html” for the “SPUIGuy: Collapsible Web Parts in a Zone 2007” web part and the Content Link field value “/ScriptingResourceCenter/ ResourcesScripts/spuiguy_collapsible_web_parts_in_zone_2007_instance.html” for the “Instance” web part.

Step 7. Set the chrome for your web parts.
The Chrome Type setting for the web parts you want to make collapsible must be either “Title and Border” (often same as “Default” out-of-the-box) or “Title Only.”

For web parts you want to be expanded upon page load, set the web part’s Chrome State to “Normal.”  For those you want to be collapsed upon page load, set the Chrome State to “Minimized.”

Step 8. Now you see it.  Now you don’t.  Whoa, there it is again.
If you use this solution and the implementation is viewable by the public, please leave a link in the comments.  I’d love to see how it’s being used.

Notes

• You may experience a delay between time the web part is written to the page and when the solution’s stylistic treatment is applied.  This is due to the loading of the jQuery library and the solution’s script file.
• This solution will only work for WSS 2007 and MOSS 2007.  I will work on a 2010 version and let you know when it’s ready.
• This solution was tested in IE 7, IE 8, and Firefox 3.6.
• Any deviations from the paths and filenames used by the solution will require adjustments to either the solution’s HTML file, the web part’s Content Link path, or both.
• In the code provided, I assume you have uploaded the latest jQuery library version as of the time of this post, which is v1.4.2 and that the file is named jquery-1.4.2.min.js.  If you are using a different version or file name, you will need to update the solution’s HTML file (spuiguy_collapsible_web_parts_in_zone_2007.html) to use the correct file name.
• If you do not want to make this web part available in the gallery, you have the option to import the web part onto the page on which you wish to use it using the standard web part import process.

During the course of a customization and branding effort in SharePoint you are likely to find that you want to style web parts to look different from (Dare I say better than?) the stylistic treatment default to SharePoint.

In my quest for finding a way to improve the look of web parts, I discovered Microsoft’s markup for web parts does not allow for much web part style manipulation, as there are not enough CSS hooks.  Nor could I modify the HTML inside a web part zone in order to wrap web parts with <div> tags for styling purposes—you can’t edit the contents of web part zone directly.  So I had to settle with wrapping <div> tags with classes around web part zones, which got me where I wanted to go somewhat, but it failed to allow me to apply treatments like background colors, borders, rounded corners, and drop shadows to individual web parts—I could only apply them to the wrapper around the web part zone.

So I wrote some jQuery to inject into the DOM <div> tags and classes for web parts that I could then use as hooks in my CSS.

On March 17, 2010, EndUserSharePoint.com published a post I wrote about wrapping web parts with jQuery that included the necessary JavaScript function, but not much else.  I apologize my post did not include the other assets needed, like the CSS and images.  Moreover, with that post I had taken the approach of creating a custom master page from which my function would be called (my usual approach for SharePoint customization efforts).  Several commenters noted they were looking for an encapsulated solution they could drop on the page via a Content Editor Web Part rather than a solution that would require them to modify master pages or page layouts.  While I advocate referencing the solution from the master page or page layout, I understand that is not possible in all situations and that EndUserSharePoint.com leans towards solutions easily implemented by content contributors and site administrators.

The following is that solution, all packaged up, ready for you to plug-and-play.

Solution

This solution will work for WSS 2007 and MOSS 2007, and it makes use of Mark Miller’s Scripting Resource Center.  Please follow Mark’s instructions so you have the proper libraries to follow along below.  My code includes paths to these libraries and references them by name, so it is important to have your Scripting Resource Center at the root of your site collection and that you use the filenames as given below.  The script, CSS, HTML, and images for this solution will be stored in your Scripting Resource Center library, to which you will reference from a Content Editor Web Part you drop on your page.  I am also supplying the pre-configured Content Editor Web Part as a .dwp that you can add to your web par gallery or import onto the page.

Step 1. Create the Scripting Resource Center libraries.

See http://www.endusersharepoint.com/2010/01/05/build-a-sharepoint-scripting-resource-center/.  I assume you have created your Scripting Resource Center at the root of your site collection and assigned it the path /ScriptingResourceCenter (any deviations will require adjustments to the solution’s HTML file).

Step 2. Upload the jQuery library into the “Resources-jQuery” library of your Scripting Resource Center.

You may or may not have a jQuery library already.

• If you already have your jQuery library version of choice, upload it into your “Resources-jQuery” library.
• If you do not currently have a copy of the jQuery library, go to http://jquery.com and click the “download(jQuery);” button.  Upload this file into your “Resources-jQuery” library.

Note: In the code provided, I assume you have uploaded the latest jQuery library version as of the time of this post, which is v1.4.2, and that the file is named jquery-1.4.2.min.js.  If you are using a different version or file name, you will need to update the solution’s HTML file (wrapwebparts2007.html) to use the correct file name.

Step 3. Upload the JavaScript, CSS, and HTML files into the “Resources-Scripts” library of your Scripting Resource Center.

Download the following files from my Box.net folder and upload to /ScriptingResourceCenter/ResourcesScripts:

• wrapwebparts2007.js
• wrapwebparts2007.css
• wrapwebparts2007.html

Note: The script in wrapwebparts2007.html that tests for and writes the reference to the jQuery library is borrowed from Christina Wheeler’s post “Transparent Overlays for SharePoint Interface Enhancement.”

Step 4. Upload the images into the “Resources-Images” library of your Scripting Resource Center.

Download the following images from my SharePoint Putty blog and upload to /ScriptingResourceCenter/ResourcesImages:

• standard_inner_wptitle_lightgrey_bg.gif
• wpcorners_f0f3f5_tl.png
• wpcorners_f0f3f5_tr.png
• wpcorners_ffffff_bl.png
• wpcorners_ffffff_br.png

Step 5. Upload my Content Editor Web Part into your site collection’s web part gallery and add it to your page.

Download the following web part from my Box.net folder and upload into your site collection’s web part gallery (located at /_catalogs/wp/Forms/AllItems.aspx).  The web part’s name will be “jQuery Wrap Web Parts 2007.”

• jQuery Wrap Web Parts 2007.dwp

On the page you wish to use this script, add the “jQuery Wrap Web Parts 2007” web part.  If for any reason you need to change the path to the solution’s HTML file, edit that web part and change the Content Link property.  In our example, we’re using the Content Link field value “/ScriptingResourceCenter/ResourcesScripts/wrapwebparts2007.html”.

Step 6. Bask in the glory of your new web-part-modifying jQuery friend.

If you use this solution and the implementation is viewable by the public, please leave a link in the comments.  I’d love to see how it’s being used.

Notes

• You may experience a delay between time the web part is written to the page and when the solution’s stylistic treatment is applied.  This is due to the loading of the jQuery library and the solution’s script file.
• This solution will only work for WSS 2007 and MOSS 2007.  I will work on a 2010 version and let you know when it’s ready.
• This solution was tested in IE 7, IE 8, and Firefox 3.6.
• Any deviations from the paths and filenames used the solution will require adjustments to either the solution’s HTML file, the web part’s Content Link path, or both.
• In the code provided, I assume you have uploaded the latest jQuery library version as of the time of this post, which is v1.4.2 and that the file is named jquery-1.4.2.min.js.  If you are using a different version or file name, you will need to update the solution’s HTML file (wrapwebparts2007.html) to use the correct file name.
• If you do not want to make this web part available in the gallery, you have the option to import the web part onto the page on which you wish to use it using the standard web part import process.
• The CSS makes use of the “!important” property attribute in order to force the override of certain SharePoint 2007 default styles.  While it is not necessary for every CSS property I write, I do it anyways out of habit and consistency.  If you prefer not to use the “!important,” feel free to remove it.

I originally wrote this article for EndUserSharePoint.com.

• standard_inner_wptitle_lightgrey_bg.gif
• wpcorners_f0f3f5_tl.png
• wpcorners_f0f3f5_tr.png
• wpcorners_ffffff_bl.png
• wpcorners_ffffff_br.png

Place these images in the “Images” folder of the “Style Library” at the root of your site collection.  If you can’t do that, then place them where you can and alter the paths in the CSS so it can find the images.

In brainstorming this blog I came up with the following topics I may address over the coming months.  It’s a draft list, with no particular order or priority, but please do take a gander and let me know if there is a particular post you’d like to see now.  The list:

1. Dissecting SharePoint: The Scalpel
2. How to create a custom master page in SharePoint 2007
3. How to create a custom master page in SharePoint 2010
4. How to add custom CSS to your SharePoint master page
5. How to add jQuery to your SharePoint site
6. Anatomy of a SharePoint 2007 web part
7. Anatomy of a SharePoint 2010 web part
8. Why can’t I select my page layout for a new page?
9. Why does SharePoint Designer say my file is checked out when it is not?
10. Print style sheet for SharePoint 2007
11. Print style sheet for SharePoint 2010
12. Where to store images and why
13. The magic of AdditionalPageHead
14. The alternative CSS file in site settings
15. You think you’re so !important
16. Styling the ribbon in SharePoint 2010
17. Putting SilverLight in it’s place
18. Multi-Column navigation flyouts in SharePoint 2007
19. Shoo, left nav! Shoo!
20. Using jQuery to wrap web parts to achieve the unachievable
21. Creating custom select boxes
22. Changing the arrow image for the welcome menu
23. How to make the Title column of a list view clickable using jQuery
24. Should you put references to custom JavaScript in the head or at the bottom of the body?
25. Add a favicon for spizazz
26. How to center a page in the browser window in SharePoint 2007
27. How to center a page in the browser window in SharePoint 2010
28. What are the UI considerations for a public SharePoint site?
29. You must use Advanced Edit in SharePoint Designer 2010

Excited yet?