# Accessible Accordion

> Build an accessible accordion component that uses semantic headings and buttons, manages `aria-expanded`/`aria-controls`, supports smooth height transitions, and allows either single-section or multiple-section open modes.

- Difficulty: beginner
- Tags: useState, useRef, useId
- Estimated time: 30 minutes
- Tests: 5
- Requires subscription: no

## Overview

Build an accessible accordion component that uses semantic headings and buttons, manages `aria-expanded`/`aria-controls`, supports smooth height transitions, and allows either single-section or multiple-section open modes.


## Requirements

- Render all accordion items closed initially.
- Open an item when its header button is clicked.
- Close an item when its header button is clicked again.
- If `multiple=false`, ensure only one item can be open at a time.
- If `multiple=true`, allow multiple items to be open simultaneously.
- Manage proper `aria-expanded`, `aria-controls`, and `aria-hidden` attributes for accessibility.
- Support smooth height transitions when opening and closing items.
- `App.tsx` does not need to be modified, although you may edit it to test the `multiple={true}` behavior.
- You can use `data` to populate the accordion items.


## Notes

- You may use `useRef` to measure the content height if you want to implement smooth CSS height transitions.
- Keep track of the open item(s) in state and update them when an item is toggled.
- Ensure proper accessibility: keyboard navigation should work and screen readers should correctly interpret the accordion state.
- You don’t need to pass an `id` to `AccordionItem`. React provides the `useId` hook for generating stable IDs.
- The prop types for `Accordion` and `AccordionItem` are already provided.
- You can use `data` to populate the accordion items.


## Tests

01. renders all items closed initially
02. opens an item when clicked
03. closes an item when clicked again
04. only one item stays open when multiple=false
05. multiple items can be open when multiple=true