Accordions

What are Accordions

Accordions are a common User eXperience (UX) pattern that helps to reduce the amount of information shown to users. Accordions also go by other names, such as collapsible sections, show/hide content, etc.

Accordions relate to the principle of Progressive Disclosure. This principle aims to maintain the focus of the user's attention by reducing clutter, confusion and cognitive workload. It only presents information with a click or a tap, if necessary.

An accordion primarily consists of two parts:

1.     A header summarises the hidden/shown content. Doubling as the visibility controller, thus, also has to be interactive.

2.     A panel is content to be hidden/shown. The content should not be focusable or interactive in any other way while hidden. If part of the panel is interactive, it actively goes against the purpose of what an Accordion means to do.

The rest of this premium article is available to ARK license holders.