Matt Berseth

One of the designers on our UI team requested a screen mockup with a page layout that is similar to your typical email client.  The page is divided vertically into 2 panes.  The left pane contains a 2 level hierarchy of categories and subcategories.  As the user selects different subcategories the designer wants the right pane's content to be updated with the corresponding information.  Just like Outlook, the designer wants the subcategories to be displayed within expanding and collapsing panels.

I am familiar enough with the AjaxControlToolkit's Accordion control to know that it should be the right tool for the job here, but I haven't actually used it before.  So I did a little research on the Accordion and created a small demo page that we used to get a feel for how the control behaves and what it takes to build and style it.

Live Demo (IE6, IE7 and FF) | Download (.Net 3.5 and Toolkit Version 3.5.11119.0)

Overview of the Accordion AjaxControlToolkit Control

In case the Accordion control is brand new to you, here is the description of the control taken from the toolkit's documentation.

The Accordion is not the only toolkit control that allows you to provide multiple panes of content and display them one at a time, the Tab control does this as well.  The trick is deciding what control better meets your requirements.  For my scenario the choice was simple - my UI design team had already made this decision for me ;).  However, if you are interested in reading about the trade-offs between the general class of Tabs and Accordion presentation styles, I would recommend reading the following articles on UI patterns

• UI Patterns, Closable Panels
• UI Patterns, Card Stack
• Yahoo! Design Pattern Library, Module Tabs
• Yahoo! Design Pattern Library, Collapse Transition

While there are some visual differences between the Tab and Accordion controls, the markup for these two controls share a similar structure.  Just like the Tab control, there are templates provided for specifying the markup for the header and content of each of the AccordionPanes. 

Below are 2 sample screen shots of a simple Accordion Control that contains 2 panes of content: Mail and Notes.  Just below these screen shots is the markup I used to create these screen shots.  I in-lined some basic styles to make it easier to map the AccordionPanes markup to the screen shots .

Building the AccordionPane Content with the ListView

After I had the feel for what it takes to creating the individual AccordionPanes and a rough idea for how I wanted to present the sub-categories, I then started replacing the pane content with the new ListView control.  To do this, I removed the static UL/LI structure from the AccordionPane's Content section and replaced it with a ListView (which is now responsible for generating this content).  Making this replacement allows me to dynamically generate the UL/LI structure no matter how many subcategories there are.  Below is the new markup for the Notes panel.  

Styling the Accordion

Now I have the basic structure I was looking for, but the style needs some work. 

Styling the Pane's Header

To style the pane headers, I used 2 images.  One for the background and another for the mouseover.

Styling the Pane's Content Background

To style the content background, I used the following background image.

Styling the Pane's UL/LI  

Styling the UL/LI was a little bit more difficult for cross browser support.  I started off using the LI's list-style-image property, but because of the differences in padding and margins used by the different browsers, this never rendered how I wanted in IE7.  So instead I followed this advise and used the LI's background property instead.  This worked much better.  Here are a few of the images I used for the Mail subcategories:

Because these images are specific to each individual item, I generated the in-line style rule using a databinding expression like so

By the way, all of the images for this sample were taken from ComponentArt's great looking Outlook 2003 NavBar example.  The download includes both PNG and GIF image formats.  I used GIF because I wanted to support IE6, but I included both just anyone would find them useful.

Important Accordion Properties

After I had the AccordionPane content rendering as desired, I started tweaking the behavior by modifying some the of properties the Accordion control exposes.  Here are a few of the ones that I found useful:

• FadeTransitions
  • If you set this to true, a Fade Animation will be applied to the Accordion as the user transitions between selected panes.
• RequireOpenPane
  • When this is set to true, the Accordion control will always have one pane open.  If you set it to false, the user can close the currently open pane by clicking on its header (leaving all of the panes closed).
• AutoSize

• SuppressHeaderPostbacks
  • When this is set to true, the Accordion will automatically suppress any postbacks that originate from controls contained within the AccordionPanes Header's.

A Few Things I Didn't Get To

• Creating a sprite for the images
• Using JavaScript instead of the :hover pseudo class for the Header hover style's
• Looking into some weirdness with how the Accordion works when AutoSize is set to Fill
  • I can reproduce some of this weirdness using the Accordion Demo by doing the following steps
    • Open http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Accordion/Accordion.aspx in IE7
    • Set the AutoSize drop down value to Fill
    • Click on the AutoSize panel. Notice how the 'Control or Extender' and 'What is ASP.NET AJAX' disappear for a bit while the AutoSize panel is being repositioned.  This doesn't happen when AutoSize is set to None

That's it.  Enjoy!