Question 1

How does the expand and collapse animation work without a JavaScript height library?

Accepted Answer

The detail wrapper sits inside a CSS grid track that transitions between grid-template-rows: 0fr and 1fr, with overflow-hidden on the inner element to clip content during the transition. That measures the real content height automatically, so it works for any length of text.

Question 2

Can I render the banner expanded by default?

Accepted Answer

Yes. Change the useState initial value from false to true so the detail paragraph is visible on first paint.

Question 3

How do I remember the expanded state across page visits?

Accepted Answer

Read and write the open boolean to localStorage inside a client-only useEffect. Keep the initial useState value at false so server rendering and the first client render still match, then sync from storage right after mount.

Question 4

Can I make just the chevron clickable instead of the whole header?

Accepted Answer

Yes. Move the button element so it wraps only the chevron icon, and change the header wrapper to a plain div. Keep aria-controls pointing at the same panel id so the relationship still reads correctly to screen readers.

Question 5

Does this support keyboard toggling out of the box?

Accepted Answer

Yes. Because the header is a native button element, Enter and Space already toggle the open state with no extra event handlers, and aria-expanded updates automatically.

Question 6

Can I put more than one of these on a page as an accordion?

Accepted Answer

Each instance manages its own open state independently by default. For accordion behavior where opening one closes the others, lift the state up to a shared openId string in a parent and pass down whether each instance is the active one.

Prop	Type	Default	Description
title	string	none	Bold header line shown when collapsed.
summary	string	none	One-line supporting text under the title, always visible.
detail	string	none	Paragraph revealed when the banner is expanded.
className	string	none	Extra classes for the outer element.

Banner Expandable

Docs

Installation

Usage

Props

Behavior notes

Frequently asked questions

More Banner Blocks