Smooth Accordion Transition

Build an interactive accordion component where clicking a header toggles its panel open or closed with a smooth height transition.

The accordion should allow expanding and collapsing content panels. When a panel is opened, it should animate smoothly rather than snapping open instantly. Clicking a header again should collapse the panel back to its original height.

Focus on implementing a CSS height transition (or a JavaScript-driven max-height animation) so the expanding and collapsing feels natural. Each header must be clickable, and only the clicked panel should toggle.

Pay attention to accessibility: headers should be keyboard-focusable and usable with Enter/Space, and the expanded/collapsed state should be visually indicated.

Test that rapid clicks do not break the animation, and that the component works when multiple panels are present.