State
Image
Comment
Section header close
Section header open
Section header hover
Selected content mark
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. list items are shortcuts to access separate panels).
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.
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.
The first section content in the accordion should be open when first loading the page.
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
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 |  |
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
Clicked Section will side open while the former open section in the accordion will close at the same time
Use:
For long lists, consider using search
Use clear labels - Accordions hide content, so the labels need to be clear.
If users will only need a few specific pieces of content within a page.
If you have only a small space to display a lot of content.
Don’t use:
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 headers to click on.
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.)
<<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>>
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Zeplin link | Screen thumbnail |
|---|---|
 | |
<<a box containing the code - discuss with Femi>>