Expand/Collapse Widget Examples

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser. It defines the structure and content of a web page.

This widget uses ARIA attributes (aria-expanded, aria-controls, role="region") for screen readers. The button toggles the visibility and the aria-expanded state updates accordingly. Focus is managed for keyboard users.

JavaScript adds a click event listener to each button. When clicked, it toggles the 'open' class on the associated content div, which controls the max-height and padding for a smooth expand/collapse animation. It also updates the button's aria-expanded attribute.