AccordionLoading saved progress…

Accordion

An accordion is a stack of titled sections where each body stays hidden until the user clicks its header. You see them everywhere — FAQ pages where each question expands to reveal its answer, collapsible documentation chapters, expandable settings panels in app preferences. The pattern lets users scan titles first and dive into only the content they care about.

Build a React component that renders the section list and toggles each body open or closed when its header is clicked. You'll use useState and conditional rendering.

Examples

  • Clicking the HTML header reveals its body underneath and rotates the chevron to point down. Clicking it again hides the body and rotates the chevron back.
  • Multiple sections can be open at the same time — clicking CSS while HTML is already open leaves HTML open and reveals CSS's body too.

Task

You're given a sections array. Each item has an id, a title, and a body. In App.tsx:

  1. Render every section's title as a clickable header. All titles are visible on load.
  2. Toggle the body's visibility when its header is clicked. Multiple sections may be open at the same time.
  3. Indicate open/closed state visually — the starter ships with a chevron that rotates via data-open={isOpen}.

Notes

  • Focus on functionality over styling — the dark theme and chevron animation are pre-wired in styles.css.
  • The sections array may be empty, one item, or many. Your render path should handle all three without changes.
  • Multiple sections open at once is the spec. Reach for useState<Set<string>> keyed by id, not booleans keyed by index.
  • Bonus: use a <button> for the header (focus + Enter/Space for free) and set aria-expanded.

Starting point

Three files in the sandbox:

  • App.tsx — the component you'll edit. The sections array is pre-seeded and three headers render in their closed state. TODO comments mark where state, the toggle handler, and the body render go.
  • index.tsx — bootstraps the React root. Don't edit.
  • styles.css — dark-theme styling plus chevron rotation hook. Edit only if you want to change visuals.
Loading editor…
Loading preview…