Accordion

Also known as

Collapsible panel, Concertina, Expansion panel

Contains

Available since

@salt-ds/core@1.0.0

Resources

View source code

Support

Accordion displays a panel that the user can expand or collapse to show or hide content and control the complexity of a given view.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Using the component

When to use

To organize related content within expandable groups/categories/sections.
To reduce scrolling or overall page length when displaying content in full isn't critical.
When you can't display all the content at once due to restricted screen space.

When not to use

To replace grouped rows with grids.

Import

To import Accordion and related components from the core Salt package, use:

Props

`Accordion`

Name	Type	Description	Default

`AccordionGroup`

Name	Type	Description	Default

`AccordionHeader`

Name	Type	Description	Default

`AccordionPanel`

Name	Type	Description	Default

Using the component

When to use

To organize related content within expandable groups/categories/sections.
To reduce scrolling or overall page length when displaying content in full isn't critical.
When you can't display all the content at once due to restricted screen space.

When not to use

To replace grouped rows with grids.

Import

To import Accordion and related components from the core Salt package, use:

Props

`Accordion`

Name	Type	Description	Default

`AccordionGroup`

Name	Type	Description	Default

`AccordionHeader`

Name	Type	Description	Default

`AccordionPanel`

Name	Type	Description	Default

Using the component

When to use

To organize related content within expandable groups/categories/sections.
To reduce scrolling or overall page length when displaying content in full isn't critical.
When you can't display all the content at once due to restricted screen space.

When not to use

To replace grouped rows with grids.

Import

To import Accordion and related components from the core Salt package, use:

Props

`Accordion`

Name	Type	Description	Default

`AccordionGroup`

Name	Type	Description	Default

`AccordionHeader`

Name	Type	Description	Default

`AccordionPanel`

Name	Type	Description	Default

Overview

AG Grid theme