This is an accessible expand/collapse widget. It uses semantic HTML buttons and ARIA attributes (aria-expanded, aria-controls) to communicate state to assistive technologies.
The content area is hidden using CSS visibility and height. When expanded, JavaScript calculates the specific height required for a smooth transition animation.
Ensure that the button inside the header has an accessible name. The visual icon is hidden from screen readers using aria-hidden="true" so it doesn't add noise to the readout.
The content container has role="region" to allow users to navigate directly to it if the content is lengthy.