Expand/Collapse Widgets

Widget 1: Basic information

This is the first widget. It demonstrates a simple expand/collapse section. The content is wrapped in a container with the class "details".

You can click the header to reveal or hide this content.

Widget 2: With multiple sections

This widget contains more content to illustrate how the container expands and contracts smoothly.

  • First item
  • Second item
  • Third item

End of content for this widget. The animation is handled by CSS transitions.

Widget 3: Longer content

Here is some longer content to demonstrate how the expand/collapse handles more text. It includes paragraphs to show readability when expanded.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu a arcu pulvinar efficitur.

Additional details become visible when the widget is opened.