shadcn.io is not affiliated with official shadcn/ui
Collapsible Groups FAQ Block for Svelte
A grouped FAQ for a grocery-delivery service: four topic bands that collapse as a whole, each holding its questions as always-visible answers, the first two open.
Installation
Overview
A collapsible-groups FAQ for Svelte with Ark UI. Four topic bands run from rail to rail, each a collapsible with an icon, a name, a question count and a chevron. A group that is open shows its questions and answers all at once, three side by side, so there is nothing more to click inside it; the first two start open and the last two closed. Each band's rule carries + marks where it meets the rails. On a phone the answers stack inside each group. It is built from Collapsible, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For help pages where readers pick a topic, then read everything in it.
FAQ
How do I change the groups and questions?
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.
Do groups close each other?
No. Each group is its own Collapsible, so any number can be open at once, and opening one never moves the focus.
Are the closed groups' answers in the page's markup?
Yes. A closed group's content is hidden but stays in the markup.
How does it work with a keyboard and a screen reader?
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.