shadcn.io is not affiliated with official shadcn/ui
Expandable Sections FAQ Block for Radix UI
A two-level FAQ for a photo-book shop: an accordion of three sections whose panels each hold an accordion of questions, with a summary of how many of each.
Installation
Overview
An expandable-sections FAQ for React with Radix UI. Under a centred header and a summary of how many sections and questions there are, one column holds an accordion of sections; each section opens to a tinted panel with a second accordion of its questions, indented under it. The first section starts open with its first question showing. The outer accordion opens one section at a time and each inner one one question at a time, independently. It is built from Accordion, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For product pages and help centres with enough questions to need chapters.
FAQ
How do I change the sections and questions?
Edit SECTIONS at the top of the file: each section has an id, a title and its questions, each with an id, the question and its answer. The counts in the summary and on each section are derived. FIRST_SECTION and FIRST_QUESTION name what is open on load; set them to ids that don't exist to start with everything closed.
How do the two levels behave?
The outer accordion keeps one section open at a time. Each section has its own inner accordion, which keeps one question open at a time and remembers it while its section is closed, so closing and reopening a section doesn't lose your place.
Are the closed answers in the page's markup?
No. This Accordion renders an answer only when its question opens. If search engines must read every answer, show them in a list that is always open, or add structured data built from the same array.
How does it work with a keyboard and a screen reader?
Every section and every question is a button inside an h3 under the block's h2, because the catalog's Accordion fixes its heading level; Enter or Space opens and closes it, and the button says whether it's expanded.
Up and Down move between the buttons of the list you are in (the sections, or the questions of one section), and Home and End jump to its first and last.