This is some content that will be shown or hidden. Click the heading to toggle its visibility.
More detailed information can be placed here.
This widget contains more text to demonstrate how the collapse works with a larger amount of content. The `max-height` property in CSS is used to control the animation and prevent the content from jumping abruptly.
When the content is hidden, `max-height` is set to 0 and `overflow: hidden` is applied. When it's visible, `max-height` is set to a value large enough to contain all the content, and the `transition` property makes the expansion smooth.
You can also include other HTML elements like images, lists, tables, etc., within the `details` div.