Each widget below is wrapped with a div.example. The controlled content container uses the class "details". Try clicking or using keyboard to expand/collapse.
This is the expanded content for the simple toggle. It can contain text, links, or any other HTML.
Here is a longer block of content to demonstrate how the widget animates smoothly between open and closed states. The script measures the content height and animates the max-height property so the transition looks natural even when the content's size varies.
Tip: The animation respects your system's "reduce motion" setting.
The toggle uses a button with aria-expanded and aria-controls. The controlled container has role="region" and aria-labelledby pointing back to the button. This allows assistive technologies to announce the relationship and state.