Expandable Sections FAQ Block for React

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.

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.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found", and the browser's find in page opens the one that holds a match.

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. Tab moves from button to button, and there are no arrow-key shortcuts.

The column fills the width between the rails, the inner rows keep a smaller indent, and a section's title and its count wrap onto two lines when they must. Nothing scrolls sideways at 320 pixels.