Import
import { Accordion } from '@dnb/eufemia'
Description
The Accordion component is a combination of an accessible button (header area) and a content container.
Relevant links
The component is designed to let you compose different parts according to your technical needs.
By default, the Accordion component animates user events, resulting in a final height of auto. This keeps the content responsive after the animation ends.
Accordion provider
Use the Accordion.Provider to pass accordion properties to all nested accordions.
Accordion groups
Both Accordion.Provider and Accordion.Group are available. They're technically the same, except that Accordion.Group automatically provides a unique group id, making all nested accordions work together and close each other when one opens.
Unexpected behavior
Note: Please avoid using a group when possible, as it creates unexpected behavior from an accessibility perspective. When a user interacts with one accordion, it triggers an action elsewhere, outside the current context—something users may not expect. It's an automated, out-of-context UI execution.