Accordion

An Accordion is an item that can contain "children" items. When closed the children items are hidden. Accordion has an icon to the right denoting whether the Accordion is closed or opened When open the children are visible. An accordion must have a minimum of 2 items. 

Behaviours & States

Behaviour

An Accordion in the closed state is designated by an up arrow to the right of the header. When an Accordion is open, the arrow is pointed downward.

A user may toggle the Accordion open/closed by selecting the header text when in the focus state. Closed is the defaut state of the Accordions.

List items within an Accordion can be selectable. Since multiselection is possible, the Accordion should not automatically close after an item has been selected.

Group

When placed in a group Accordions are mutually exclusive and only one Accordion in the group can be open at a time. 

States

An Accordion can either be open or closed. They can be opened by selecting when in the focus state.

Sizing

The height of an Accordion is dependent on the number of items within. The width of the Accordion is determined by its parent container. The width may also be fixed causing longer text to truncate with an elipsis. When in focus, the text will marquee.

Illustration

ACCORDION.png

Navigation