This is the controlled content for the first section. It includes a basic paragraph and some list items to demonstrate different types of content.
Feel free to click the button above to expand or collapse this content.
This section provides more in-depth information. Expand/collapse widgets are excellent for progressive disclosure, helping to keep interfaces clean until users need more details.
They improve user experience by presenting information in manageable chunks.
Note: Accessibility features like `aria-expanded` and `aria-controls` are included for screen readers.
This widget is initially expanded. The `aria-expanded="true"` attribute on its button and the `expanded` class (or lack of `hidden` class in JS) on its content div set its initial state.
Click the button to collapse it.
The JavaScript ensures consistent behavior regardless of the initial state.