Fit and Finish: Insight from the Ironworks User Experience Group

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.

How to Create an Accordion Web Part

An accordion web part is a web part that contains a list in which a list item can be clicked to expand and show sub items to that list item.

To the left is a screenshot of one I did recently in SharePoint using jQuery. In this example, the Group 1, Group 2, and Group 3 items have sub items. Group 2 is expanded to show its sub items. I could click on the "Group 2" label and the sub items would collapse such that the Group 2 item would look like the Group 1 and Group 3 items.

Below is the jQuery script I wrote that controls the expand/collapse (or accordion) functionality.

Using jQuery to Wrap Web Parts and Achieve the Unachievable

This is a jQuery script I wrote that looks at each web part on the page and, based on each web part's chrome setting, adds containers around the web parts. I use this script to apply stylistic treatments like rounded corners to individual web parts, not just the web part zones they belong to.

Creating Custom Select Boxes

Oh grey, drab box, why do thee tire me so?

And so begins the quest to add some spice to the look of a standard select box. Check out this post: "How to Make Custom Select Boxes". I've used this jQuery script as the basis for tricking out my select boxes on a few projects to date. For my usage I've added additional functionality for onchange event handling, among other modifications.

It's great for basic functionality and is a good starting point for more complex uses. Check it out.

Anatomy of a SharePoint 2010 Web Part

If you want to change the way your SharePoint 2010 web parts look, you will need to know how web parts are structured. There are considerable structural differences between SP 2010 web parts and those of SP 2007. Use this structure to override SharePoint's styling using your own custom CSS. Below are the anatomies of all SP 2010 web parts for the three chrome options (Title and Border, Border Only, and Title Only).

Anatomy of a SharePoint 2007 Web Part

If you want to change the way your SharePoint 2007 web parts look, you will need to know how web parts are structured. Use this structure to override SharePoint's styling using your own custom CSS. Below are the anatomies of all SP 2007 web parts for the three chrome options (Title and Border, Border Only, and Title Only).

The Best Way to Add Custom JavaScript and jQuery to SharePoint

During extensive SharePoint user interface customization you'll likely encounter a scenario where you need to make a web part or user control do something it was not intended to do or have a look that cannot be accomplished using the CSS hooks provided out-of-the-box. The solution is to create a custom master page and include a reference to a JavaScript file where you can modify the Document object. While straight JavaScript will do, I prefer to use the jQuery JavaScript library, which is far more robust, easier to use, and allows for plugins. Follow the steps below to add jQuery to your master page.

The Best Way to Add Custom CSS to SharePoint

To thoroughly customize your SharePoint site, you'll need to use a custom CSS. SharePoint offers a way to specify a single CSS file to use via the "Master page" settings for the site. However, using this approach still limits you to customizing only those IDs and classes that are included on the pages by SharePoint. Moreover, using this setting applies to both site and system pages, which may not be desirable.

With these downsides in mind, the best approach is to create a custom master page and include references to one or more custom CSS files. Follow the steps below to include a custom CSS file in your master page.

How to Create a Custom SharePoint Master Page

The first step in customizing your SharePoint site is to create a custom master page.  The following steps will help you do just that (please note there are differences indicated between SP 2007 and SP 2010).

Dissecting SharePoint: The Scalpel

HTML developer tools are critical to any SharePoint user interface customization effort.  The four tools I find I use most often are Internet Explorer 8's built-in Developer Tools, the IE Developer Toolbar plugin for IE6 and IE7, and the Firebug and Web Developer toolbar plugins for Mozilla Firefox.

These tools allow you to quickly find IDs and classes in SharePoint's HTML as well as the CSS properties being applied to any given HTML element.  Having such tools eliminates the need for documented CSS classes used by SharePoint.

Try them out.  I have no doubt you'll find them invaluable for SharePoint and other projects.