How should you show that an accordion is expanded?

When you have an accordion, you need some way of showing the current state is expanded.

There are a number of different ways of handling this, and each is used by a number of respected websites and frameworks. Hence it's not clear which method is best to use in which situation.

When is it best to use which method? Bonus points for any studies on this.

No symbols at all, just colour to indicate the expansion

Gmail for Android uses this, but here are some clearer examples:

enter image description hereenter image description here

Left and down chevrons on the right

These are used by the BBC Global Experience Language:

enter image description here

Up and down chevrons on the right

These are used in the Android Design Guidelines documentation and in Silverlight.:

enter image description hereenter image description here

Right and down chevrons on the left

enter image description here

Plus (+) and minus (-) symbols on the right

This is used as the default in ExtJS

enter image description here

Plus (+) and minus (-) symbols on the left

enter image description here

Tags: