Accordion

What is it
The Accordion component allows the user to hide or reveal sections of content on the page, which improves space efficiency while providing self-managed movement throughout the workflow. this allows additional information about multiple objects without leaving the page. The user can simultaneously or individually view the content of multiple sections before taking an action.

When to use:
Use Accordion when a workflow includes extensive content made of closely related groups which may be compared and/or viewed simultaneously or individually before completion.

Why use an Accordion
Accordions provide staged or layered access to information. Each row provides identification of an object, plus if needed, columns of additional information for identification or comparison. When opened, a panel provides space for an overview, or in the case of simpler objects, all the details needed to take action.

Possible Alternate Solutions
• Use a Data Grid if reading columns is necessary.
• Use Cards if each object may have different information.

Key Features

• Accordion is a type of master/detail and the principle is progressive disclosure

• Its good when you need a a tabular/column layout. This can be a continuation of the same data or a different table.

• Its good when you want to continue seeing the "parent table" while looking at details.

• Its good when you want to be able to expand two or more rows and compare details

• DS Accordion has an optional toolbar for taking actions that apply to a section.

• Title, Subtitle, and header controls

• Toggle behavior which closes an open section when a second section is opened. Only one section is open at a time.

• Multi Open behavior allows for opening two or more concurrently.

Stuff to integrate

Use Accordion when a workflow includes extensive content made of closely related groups which need to be viewed simultaneously or individually throughout the workflow.

The Accordion component allows the user to hide or reveal sections of content on the page, which improves space efficiency while providing self-managed movement throughout the workflow.

Accordions are can be placed anywhere in the Body Panel in a Full Width layout (Fig. 1) or a Content Panel within a layout (Fig. 2). Accordions are not appropriate for Modal because the amount of content is too great.

Please see the section for complete details on Layout Types.

Please see the component page for complete details.