Accordion Item Nested
How to use
- Add an ID label to the parent accordion.
- Add the same ID label to the accordion intended to be nested in the parent accordion.
- Add or delete nested accordion items as required.
Mandatory
- Select First Panel for the first accordion in a group of nested accordions.
- Select Last Panel for the last accordion in a group of nested accordions.
- Select First Panel and Last Panel for the accordion if using a single nested accordion.
Options
- Container Width
- Remove Top Margin
- Remove Bottom Margin
When to use
Use a nested accordion or a group of nested accordions when content runs long and can be edited into segments. The organization and user experience of the page will be enhanced with collapsable content.
When to consider something else
If the content is relatively short, use a standard accordion. There's no need to nest the content.
Accessibility tips
TBD - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Component Specifications
| Field | Description | Required / Optional |
|---|---|---|
| Title | Headline, 25 characters or less. This is displayed on the collapsed accordion | Required |
| Body | Can be reasonably long. This is displayed in the panel of the expanded accordion. Use h4 headlines, paragraphs, and lists to organize your content. | Required |
| Panel ID | Use only when there are nested accordions for a respective parent accordion | Required, when there are nested accordions for a respective parent accordion |
Description
An interactive nested accordion is used to present content in a nested expandable and collapsible format that is part of a parent accordion with overarching content.
On-page example
When to use
Use a nested accordion or a group of nested accordions when content runs long and can be edited into segments. The organization and user experience of the page will be enhanced with collapsable content.
When to consider something else
If the content is relatively short, use a standard accordion. There's no need to nest the content.
Accessibility tips
TBD - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Component Specifications
| Field | Description | Required / Optional |
|---|---|---|
| Title | Headline, 25 characters or less. This is displayed on the collapsed accordion | Required |
| Body | Can be reasonably long. This is displayed in the panel of the expanded accordion. Use h4 headlines, paragraphs, and lists to organize your content. | Required |
| Panel ID | Use only when there are nested accordions for a respective parent accordion | Required, when there are nested accordions for a respective parent accordion |