Collapsible Sidebar FAQ Block for React

Edit GROUPS (each group has an id, a label and its topics) and QUESTIONS (each question names its topic) at the top of the file. Counts are worked out from the questions, and the rail, the phone select and the line above the list all read the same data. A group starts open; give defaultOpen to the ones that should and leave it off the rest.

The rail is a navigation landmark named "Topics". Each group header is a button that says whether it's expanded, each topic is a button, and the one that's chosen is marked with aria-current. Choosing a topic never moves focus, and the count at the foot is a polite live region ("Showing 3 of 12 questions").

A native select labelled "Topic", with the two groups as option groups and the question counts in brackets. Because it is the browser's own control, a phone opens its picker. It shares the rail's state, so resizing the window between the two keeps your choice.

No: the list renders only the topic that's chosen. The first view, "All questions", holds every answer. Closed answers: 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.

The list keeps a minimum height equal to the rail's, so choosing a topic of three questions doesn't pull the page up under you on a large screen. Opening answers still makes a list taller, as any accordion does.

The header fades up once on load and a group slides open or shut; a chevron points down while its group or answer is open and toward the end while it's closed (it mirrors in a right-to-left layout). With reduced motion the entrance is off and the groups open at once.