Accordion

An Accordion is a device which presents a hierarchical set of items in which only a single branch of that hierarchy may be exposed at one time.

Rules of Thumb

  • Give titles to Accordions if content is not obvious to users.

accordion 1

accordion 1

Appearance and Behavior

Clicking on an item in an Accordion selects and expands that item. If there are any child items in the hierarchy below, those items are automatically displayed. Items are indented according to their depth.

Chapter 1 is selected, and its children are displayed.

accordion 2

accordion 2

If a child item of the current selection is selected, that entire branch remains displayed.

accordion 3

accordion 3

If a different branch is selected, for example, by clicking on a different top level item, the current branch automatically closes and the new branch opens.

accordion 4

accordion 4

If a child item of the current selection is selected, that entire branch remains displayed.

accordion 5

accordion 5
×