This is the content that expands and collapses. It can contain any HTML elements you wish, such as paragraphs, lists, images, or other interactive components. When collapsed, its `max-height` is set to `0`, making it invisible, and `overflow: hidden` prevents its content from spilling out.
Click the button again to hide this information.
Here are some advanced options:
These options become visible when the section is expanded.
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.
This widget demonstrates how to handle a larger block of text. The `max-height` in CSS for the `.details.expanded` class should be sufficiently large to accommodate the content, or a more sophisticated JavaScript approach for dynamic height calculation might be needed for very varied content lengths.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a sagittis vitae, feugiat sit amet quam.