shadcn.io is not affiliated with official shadcn/ui
Progressive Disclosure FAQ Block for Svelte
A FAQ for a meal-kit service where every question shows its one-line answer and a Details button opens the longer one: a short list and a note.
Installation
Overview
A progressive-disclosure FAQ for Svelte with Ark UI. Six questions each show their one-line answer on the page, and a small Details button under it opens the long version: a short list and a "Good to know" note, eased open with a height transition. The start column holds the title, one sentence and an outline link, and stays in view on a wide screen while you read down the questions at the end, behind a split divider that runs from the page's top rule to the block's end. On a phone the header stacks above the questions. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Button and Guides, with CSS transitions and your theme's tokens for every colour. For products where most visitors need a sentence and a few need the whole story: allergens, delivery, returns.
FAQ
How do I change the questions?
Edit QUESTIONS at the top of the file. Each entry has an id, the question, the one-line short answer that always shows, more (the list that opens, three lines is the right amount) and note (the closing "Good to know" sentence). Add or remove entries freely; the rows, the button ids and the panels are all built from the list.
How does the Details button work?
It's a ghost Button with aria-expanded and aria-controls pointing at the panel it opens, and its label never changes: the chevron turns to show the state. Each row keeps its own state, so any number of them can be open at once. Its screen-reader name includes the question ("Details: Can you cook around my allergies?"), so six Details buttons are never a list of identical names.
Is the long version in the page's markup when it's closed?
Yes. The panel is a grid row that collapses to zero height and is marked inert, so its text stays in the page for search engines and the browser's source, while its list isn't read by a screen reader or reachable with Tab until you open it. Every target uses the same markup, because the block uses the catalog's Button rather than an Accordion.
What moves, and what happens with reduced motion?
The header and the list fade up once when the page loads, a panel eases open with a grid-rows transition, and the chevron turns. With reduced motion the entrances are off, a panel opens at once and the chevron turns without animating.