An expand/collapse widget, often implemented using the disclosure pattern, allows users to toggle the visibility of content. This helps in managing screen real estate and reducing cognitive load by hiding information until it is needed.
This implementation uses vanilla JavaScript. It listens for clicks on the button, toggles the aria-expanded attribute for accessibility, and calculates the scrollHeight of the content container to animate the max-height property smoothly.
ARIA attributes like aria-expanded and aria-controls are crucial for screen readers. They inform assistive technology users about the state of the widget (whether it is open or closed) and which content block corresponds to which button.