Examples of an accessible expand/collapse pattern. Each widget is wrapped with a div.example and the controlled content container uses the class "details".
This is the content revealed by the expand/collapse widget. It can contain arbitrary HTML — paragraphs, lists, images, or other UI. The container has the class "details".
This example demonstrates a longer block of content. The JavaScript sets the details container's max-height dynamically to allow a smooth transition that matches the content height.
Resize the window while the panel is open to see the script adjust the max-height to match the new content flow.