Collapsible Panels

Problem

Users need to access information or functionality but they only need in under certain (temporal) circumstances

Solution

Create panels that can be opened or closed independently of each other

From www.philips.co.uk

Use when

When a lot of data or a lot of functionality is available, users typically only need a certain subset at any given moment. In order to keep the screen clean, it is preferred to show only the core information or functionality, and hide the rest but make it available on demand. Hence, Collapsible Panels are often used in a Web-based Application. If Tabs are used the amount of screenspace will typically be large which may lead to awkward pages.

How

Stack several panels on top of each other and give each panel a label. The label should be clickable and toggles between the expanded and collapsed states of the panel. In order to make this behavior clear to the users, an arrow pointing to the right (collapsed state) or down (expanded state) can be used. The arrows are commonly used in Mac OS X and many Adobe applications so they may be somewhat familiar to users. Alternatively, double arrows up or down, or plus and minus symbols, are sometimes used as well. Use a transition animation if possible to give users feeback of the expanding/collapsing process.

Why

Basically Collapsible Panels are similar to a Accordion but now with the possibility to keep entire sections open. Whereas Details On Demand shows only information regarding one item, Collapsible Panels can be seen as an extension to hide and show larger chunks of information or functionality. Collapsible Panels are very space efficient as they are no larger than they have to be. When the number of panels you have is low, consider Tabs but that may be less space-efficient. When used in the main navigation, Collapsible Panels become nearly identical to Navigation Tree but then with only 1 level.

The main downside of Collapsible Panels is that they are not that common and may confuse less experienced users. They are common in desktop applications such as in Adobe CS3 but in web applications they are less common. Another issues is deciding what the default state of each panel should be since some may be expanded and others collapsed. Deciding on this issue requires good insight into your users' needs.

More Examples

Google uses Collapsible Panels on their iGoogle pages.

Also known as

Closable Panels

Code examples

Spry Widget (Adobe)
Collapsible Panel using Scriptaculous
Implementation in ASP.NET
Implementation in Flex

Comments

3 comments have been added to this pattern

doble2fantasia, 20th January 2009

I like a lot the Collapsible Panels of PhilipsÃÂÃÂÃÂÃÂ´ Website. ItÃÂÃÂÃÂÃÂ´s a great concept for reducing space and to make a more complex, useful and atractive menu navigation.

ItÃÂÃÂÃÂÃÂ´s a pity the accesibilityÃÂÃÂÃÂÃÂ´s question but, anyway, i think that a lot of times interaction and accesibility are enemies.

PJ_KD, 22nd October 2009

I have tried using the CS3 Dreamweaver collapsible panels but find that they appear opened when the page opens and then collapse once they are clicked on. I have tried the various settings for the panels but they always start as opened. Any ideas??? I have tried various browsers (IE, Firefox)

yesmaybe, 21st December 2009

Thanks for the introduction. I am practicing with Spry 1.6 in DW CS4 now. I want to add the plus/minus icons to the tabs to make it clearer they can be clicked and opened.

I can not find a tutorial anywhere .. any ideas?