Expand/Collapse Widgets

Widget 1: Basic Information

This is the first piece of collapsible content. It contains some basic information about the widget.

You can put any HTML content here, like paragraphs, lists, or even images.

Widget 2: Advanced Options

Here are some advanced configuration options:

Click the button again to hide these options.

Widget 3: Long Content Example

This example demonstrates a longer piece of content that might take up more vertical space when expanded. The `max-height` CSS property ensures a smooth transition.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Feel free to adjust the `max-height` in the CSS for the `.details.expanded` class to accommodate the longest content you expect.