Status colour Yellow title ongoing
| 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 (i.e. list items are shortcuts to access separate panels).
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
...
| Structure Element | Description |
|---|---|
Section header close |
|
Section header open |
|
Section header hover |
|
| Selected content mark |
|
...
| Structure Element | Description |
|---|---|
| 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
...