Expand/Collapse Widgets

This is the content for the first expandable section. It can contain any HTML elements, such as text, images, or other widgets.

When expanded, this text becomes visible, allowing users to delve deeper into specific topics without cluttering the initial view of the page.

• Organizes information effectively.
• Improves user experience by reducing visual noise.
• Saves screen space, especially on mobile devices.

When collapsed, it is hidden again, providing a clean and organized layout for your page.

This is the content for the second expandable section. It demonstrates that each widget operates independently, maintaining its own state.

You can have multiple instances of this widget on the same page, and they will all function correctly without interfering with each other.

This example has a bit more text to show how it handles larger content blocks and integrates different media types.

The transition is smooth thanks to CSS max-height property combined with JavaScript to dynamically calculate the content's actual height.

Q: Can I put anything inside the details section?

A: Yes, you can include paragraphs, lists, images, videos, tables, or even other nested widgets. The JavaScript dynamically adjusts the height.

Q: Does it work on all browsers?

A: This implementation uses standard HTML, CSS, and JavaScript features that are widely supported by modern browsers.