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.
