You're a frontend engineer on the CoderX docs team. The FAQ page is built around a reusable <Accordion> component (defined in src/App.jsx), but the current implementation is broken. It is supposed to behave like a classic single-open accordion:
- Every section renders a header
<button> with class accordion-trigger.
- Every section's content panel (class
accordion-panel) starts collapsed.
- Clicking a header expands that section's panel.
- Clicking an already-expanded header collapses it again.
- Opening one section auto-closes any other open section (at most one panel open at a time).
- Each trigger reports the correct
aria-expanded accessibility state ("true" when its own panel is visible, "false" otherwise).
All six behaviors above are exercised by the hidden test suite — make them all pass.
The Fix
Today the accordion never reveals any content — the click handler always collapses the component back to null, so every panel stays closed and aria-expanded never changes. Rearchitect the state so that it:
- Tracks at most one open index at a time (use
null to mean "nothing open").
- Toggles: clicking a closed header opens its panel; clicking the already-open header returns the accordion to "nothing open".
- Drives both panel visibility (the
hidden attribute on .accordion-panel) and the trigger's aria-expanded attribute from that single value.
Notes
- Don't rename
SECTIONS, the exported App, or the accordion-trigger / accordion-panel class names — the tests rely on them.
- Styling is already provided in
src/App.css — only fix the behavior, don't change the styles.
- The initial render must keep working (heading + all headers visible, no crash).