Migrating react-accordion 1.x → 2.0

Version 2.0 requires @volvo-cars/css to be installed first.

2.0 is significantly smaller, with no dependency on vcc-ui or any CSS-in-JS library. It uses the native <details> and <summary> elements and is styled with static CSS. This gives you:

• Built-in accessibility features from native elements
• Automatic “Find in Page” support — the accordion opens when a browser search matches content inside it
• Reduced HTML per item: from ~1KB / 11 elements down to ~0.4KB / 5 elements

---

Key changes

Accordion was renamed to AccordionDetails

The component was renamed to better reflect that it renders a <details> element and represents a single item in an accordion.

AccordionDetails (content wrapper) was removed

You no longer need a wrapper component around accordion content. Add your content as direct children of the new AccordionDetails instead.

Before

<Accordion>
  <AccordionSummary>Summary</AccordionSummary>
  <AccordionDetails>Content</AccordionDetails>
</Accordion>

After

<AccordionDetails>
  <AccordionSummary>Summary</AccordionSummary>
  <div className="pb-32">Content</div>
</AccordionDetails>

---

Renamed and removed props

AccordionDetails (formerly Accordion)

1.x prop	2.0 equivalent
expanded	open
defaultExpanded	defaultOpen
onChange	onToggle
onAnimationEnd	onAnimationFinish
hideDivider	className="border-b-0"
extend	className
lazyRenderDetails	Removed — see advanced usage docs

AccordionSummary

1.x prop	2.0 equivalent
onInteraction	onClick (prefer onToggle on AccordionDetails instead)
extend	className

New in 2.0: iconPlacement prop to position the chevron to the left or right of the summary text.

AccordionAction

Removed. Interactive content should not be placed within the accordion summary.

AccordionController

1.x prop	2.0 equivalent
multiple	exclusive (inverted logic — defaults to true). Can also be set to "until-lg" for mobile-only exclusive behaviour.

Expand

Removed. Use useAnimatedDetails instead for animated open/close behaviour.