Table of Contents FAQ Block for React

Edit TOPICS at the top of the file: each topic has an id, a title and its questions, and each question an id, the question and its answer. The outline (OUTLINE), the counts and the Jump to select are all derived from it. The ids double as anchors on the page, so keep them unique and prefix them (brackwater-…) if more than one FAQ can share a page. FIRST_OPEN names the question that is open on load.

The Toc watches each topic heading with an IntersectionObserver. The block keeps only the first heading in view as current, so the bar sits beside one topic at a time; at the very top and bottom of the page it pins to the first and last topic. The outline is sticky at lg and up, so no ancestor of it may add overflow: hidden, auto or scroll (the section's overflow-x-clip is fine). Adjust lg:top-20 to clear your site header.

It jumps to the question and opens it. One answer is open at a time across the whole block: opening a question in one topic closes the one open in another, so the page doesn't grow as people skim. The outline's links are real anchors (#brackwater-region), so they also work as deep links.

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.

The outline is a navigation landmark named by its title, with a link for each topic and each question. Every question is a button inside a heading, and Enter or Space opens it. Both the topic headings and the questions are h3 under the block's h2, because the catalog's Accordion fixes its heading level. Tab moves from question to question; there are no arrow-key shortcuts between rows on this base.

Below the lg breakpoint the outline is hidden and a Jump to a topic select sits under the header; choosing a topic scrolls to its band and the select returns to its prompt. The bands run from rail to rail, and the questions wrap to a second line when they must.