Click the button to expand or collapse the content area. Each widget is wrapped in an element with the class "example". The expandable content uses the class "details".
This is the controlled content for the first widget. It is shown or hidden when the button is pressed.
Accessible with ARIA attributes
Pure HTML/CSS with progressive enhancement
Here is a second example showing a longer block of content. You can customize this area with any HTML you want.
Item one
Item two
Item three
In this third widget, you can present additional information such as tips or related links.