A simple, accessible expand/collapse pattern. Each widget is wrapped with a div.example and the controlled content container uses a details class.
This is the expanded content for the first example. It is initially collapsed. Use the button above to toggle visibility.
Because the toggle button's aria-expanded attribute starts as "true", this details container is visible on load. The script will respect that initial state.
Here is a larger block of content to demonstrate the animation and layout behavior. The panel supports any HTML content inside, including forms and interactive controls.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.