| Table of Contents |
|---|
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 at once. The list items are effectively shortcuts to access separate viewscontent sections.
...
Usage & Behavior
An accordion should be used when
...
:
To allow users to have control over the content, by expanding it or deferring it for later lets them decide what what they want to read and hiding what they want to ignore.
If you have Where there’s only a small space in which to display a lot of content, Collapsing the page minimizes .
When wanting to minimize scrolling.
Hiding parts To make lots of the content can make the web page appear less daunting, by allowing the user to focus on one part at a time.
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 sections within the constraints of the accordion.
Accordions work especially well whenever where vertical space is limited.
Default
The first content 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, is included as a LUX font icon.
A mark (blue dot) should be added to the header of the open section.
Content
The open section has no maximum height. However, it must follow the other padding specs below.
Section content height should have The open section height should be a minimum of 3 text rows.
The width of an accordion varies based can vary depending on the content, layout, and page design.
Scrolling
Accordions take up 100% width of their parent container.
Scrolling will should be added to section content that sections which exceed the height of the accordion container.
States (TBD - not final design)
State | Image | Comment |
|---|---|---|
Section header closeclosed |  | |
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 HeaderTheres click on any part of a section header to select (open) it.
There's always one section open in the accordion, and only one.
Only 1 content one section can be viewed open at a time, when .
When opening a new section, the already previously-open section will should close automatically.
when When closing an open section, the next section in the accordion will section beneath it should open automatically, closing . Closing the last section in the accordion will should automatically open the section directly above him automaticallyit.
Hovering over a section header will should show a tooltip with the full name of the section header.
Transitions
Clicked Section will side open Selected sections should slide open, while the former previously-open section in the accordion will close slides closed at the same time.
...
Best practices
Use:
For long lists, consider using search.
Use clear labels - Accordions hide content, so the labels need to be clear. If : they need to clearly describe the hidden content.
Where users will only need a few specific pieces of content from within a page.
If you have Where there’s only a small space in which to display a lot of content.
...
If users need to see most or all of the information on a page. Use well-formatted text instead.
If there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what which headers to click on.
Usability guidance:
Make the entire header selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.
Give interactive elements enough space. Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device).)
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
...
Zeplin link | Screen thumbnail |
|---|---|
  | |
Code
<<a box containing the code - discuss with Femi>>
...