Two examples below demonstrate an accessible expand/collapse pattern. Each widget is wrapped in a div.example and the controlled content container uses the class "details".
About this item: This section contains a short paragraph of descriptive text. It demonstrates how content is revealed and hidden while preserving focus and accessibility attributes.
Try using the button to expand or collapse this content. Keyboard users can press Space or Enter when the button is focused.
Technical details: The expand/collapse control uses aria-expanded on the controlling button and aria-controls to associate the content region. The content container has class="details" per the requirement.
The script animates height for a smooth transition and sets the hidden attribute when collapsed. This keeps the content out of assistive technology tree when closed.
When expanded, the region is revealed and focus remains on the toggle button. Visual styles are intentionally subtle to keep the interface lightweight.