The Demo Site

DISCLAIMER : THIS IS TRIAL POSTING, CONTENT IS UNCONTROLLED

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.

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.