Description

An accordion is a list of headers that hide or reveal additional content when selected.

An accordion is similar in purpose to a tabbed interface, : a list of items where exactly one item is expanded into a panel (i. e. The list items are effectively shortcuts to access separate panels)views.

...

Usage & Behavior

An accordion should be used when 

• Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore.

• If you have only a small space to display a lot of content, Collapsing the page minimizes scrolling.

• Hiding parts of the content can make the web page appear less daunting.

General guidelines

Internal Logic

The accordion component delivers large amounts of content in a small space through progressive disclosure.

• The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion.

• Accordions work especially well whenever vertical space is limited.

Default

The first section content in the accordion should be open when first loading the page.

structure

• Header
  

  • Header text can wrap, but it is recommended that it is short and to the point.

• • The chevron icon can be found on the LUX Icon Font. 

• Content

  • There is no limit to the height of an open section, however, follow the other padding specs below. 

  • Section content height should have a minimum of 3 rows.

  • The width of an accordion varies based on the content, layout, and page design. 

• Scrolling 

  • Accordions take up 100% width of their parent container.

  • Scrolling will be added to section content that exceed the height of the accordion container

States (TBD - not final design)

State	Image	Comment
Section header close
Section header open
Section header hover
Selected content mark

...

State	Image	Comment
Selected content mark
Section header with checkbox
Section header with warning

Interaction

• You can Click on the entire accordion Section Header

• Theres always one section open in the accordion, and only one

• Only 1 content can be viewed at a time, when opening a new section, the already open section will close automatically

• when closing an open section, the next section in the accordion will open automatically, closing the last section in the accordion will open the section above him automatically

• Hovering over section header will show a tooltip with the full name of the section header

...

Zeplin link	Screen thumbnail
https://zpl.io/VkmX6dq	Image RemovedImage Added

Code

<<a box containing the code - discuss with Femi>>

...