Collapsible Groups FAQ Block for React

Edit GROUPS at the top of the file: each group has an id, a title, an open flag (whether it starts open) and pairs, each with an id, a question and an answer. The count in each band is derived. The icon for a group comes from GroupIcon: add a branch for a new id, or swap the lucide icons.

No. Each group is its own Collapsible, so any number can be open at once, and opening one never moves the focus.

Yes. The Collapsible keeps its panel mounted and only collapses it, so a closed group's answers stay in the markup.

Each band's name is a button inside an h3; Tab moves from band to band, and Enter or Space opens or closes it. The button says whether the group is expanded. Inside an open group the questions and answers are a description list, so a screen reader reads them as terms and definitions. There are no arrow-key shortcuts between groups.

The header fades up once when the page loads, a group's panel eases open and the chevron turns. With reduced motion the entrance is off and the chevron turns without animating. The panel still eases its height over 200 milliseconds.