Collapsible Panels


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


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


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.


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.


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

plml logo


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?

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below