Smooth Accordion Transition

Accordions let you pack lots of information into a small space — FAQs, settings panels, and product descriptions all use them. You click a header to reveal the content below, and click again to hide it.

In this challenge, you will build a Smooth Accordion Transition with a toggle button and a content panel. Clicking the button should expand or collapse the panel with a smooth height animation. When collapsed, the content is hidden. When expanded, it slides down smoothly.

Use CSS transition on the max-height or height property so the panel animates instead of snapping open instantly.